メインメニュー


[スポンサードリンク]


StyleSheetの適用順位
StyleSheetは、複数のものを設定することが出来ます。
このとき、StyleSheetには適用される優先順位があります。
同じセレクタに対して色んなところでスタイルを指定したとき、実際に適用されるのはどれなのか…を解説します。

複数のStyleSheetの適用順位
StyleSheetは、文書の制作者だけが設定できるものではありません。
ブラウザはデフォルト(初期値)のStyleSheetを持っていて、まず最初にそれが適用されます。
また、ブラウザによってはユーザーが任意のStyleSheetを適用させることができます。
ひとつの文書に対して、上記「制作者」「ブラウザ」「ユーザー」の複数のStyleSheetが適用されるとき、以下の順位でStyleSheetが適用されます。

(1) ブラウザのデフォルト(初期値)のStyleSheet
     
(2) ユーザーの任意のStyleSheet
     
(3) 文書の制作者が定義したStyleSheet
 

(1)(2)(3)の、それぞれでH3要素にStyleSheetを適用させた場合、(3)で指定したH3要素が優先して表示されます。

(1) ブラウザのデフォルト(初期値)のStyleSheet
    H3 { font-size:8pt }
     

(2) ユーザーの任意のStyleSheet
    H3 { font-size:12pt }
     

(3) 文書の制作者が定義したStyleSheet
    H3 { font-size:24pt }
     

 24ptで表示されます

    ※ (3)のStyleSheetが優先されます 


優先されるStyleSheetの適用順位を変える
通常は、「ユーザー」のStyleSheetよりも「制作者」のStyleSheetが優先されますが、これを逆転させることができます。
それには「!important」を指定しますが、この指定は制作者側のStyleSheetでも使用することができるため、双方で競合する可能性があります。
この場合は、「ユーザー」のStyleSheetが優先されます。
P { font-size:10pt !important } 

同一StyleSheet内の適用順位
また、同じStyleSheet内でも適用順位があります。
一般的にはより細かい部分で指定しているスタイルが優先されます。

(1) 要素に対して指定したスタイル
     
(2) クラスに対して指定したスタイル
     
(3) idで指定したスタイル
     
(4) 競合してしまうときは、後ろに指定されたスタイルが適用されます

(1)(2)(3)で、順番にスタイルを適用させた場合、(3)で指定したスタイルが優先して表示されます。

(1) 要素に対して指定したスタイル
    H3 { color:red }
     

(2) クラスに対して指定したスタイル
    .class1 { color:blue }
     

(3) idで指定したスタイル
    #id1 { color:green }
     

  緑で表示されます

    ※ (3)のスタイルが優先されます 

同じ要素(クラス・id)に対して複数のスタイルを適用させた場合、後ろで指定したスタイルが優先して表示されます。

(1) H3 { color:red }
(2) H3 { color:blue }
     

  青で表示されます

    ※ (2)のスタイルが優先されます