優先順位・個別性・!important宣言
CSSの適用方法は多種多様です。様々な指定を行うため、これらが競合した場合に備え、優先度が決められています。
スタイルのもっとも基本的な優先順位は、「後から読み込んだスタイルを優先的に適用」します。
読み込む順序は、上から読み込まれていきますので、以下のような場合は後から書いているスタイルが優先されます。
p {
color: #000;
}
p {
color: #333;
}
これで後から書いているcolor: #333;
が優先されます。
また、次のように書いたとします。
p.note {
color: red;
}
.note {
color: orange;
}
<p class="note">
ちょっとした注意書きみたいな文書
</p>
この場合は、後から書いているcolor: orange;
が反映されずに、先に書かれているcolor: red;
が優先されます。
これはセレクタには個別性が決められており、その個別性の計算に従って優先度が決まるためです。
ちなみに、冒頭で書いた「後から読み込んだスタイルが優先される」のはこの個別性の計算を行った後になります。
セレクタの個別性の計算
セレクタには子孫セレクタやクラスセレクタ、IDセレクタなどスタイルを適用させる方法は色々ありますが、個別性が高いセレクタ程、優先度が高くなります。
この個別性の計算は以下のようになっています。
- style属性がある場合は、1000になります。 (= a)
- セレクタに含まれている IDセレクタを100としてその数を足します。 (= b)
- セレクタに含まれている id以外の属性と、擬似クラスを10としてその数を足します。 (= c)
- セレクタに含まれている 要素、擬似要素を1としてその数を足します。 (= d)
* {} /* a=0 b=0 c=0 d=0 -> 個別性 = 0 */ li {} /* a=0 b=0 c=0 d=1 -> 個別性 = 1 */ li:first-line {} /* a=0 b=0 c=0 d=2 -> 個別性 = 2 */ ul li {} /* a=0 b=0 c=0 d=2 -> 個別性 = 2 */ ul ol + li {} /* a=0 b=0 c=0 d=3 -> 個別性 = 3 */ .warning {} /* a=0 b=0 c=1 d=0 -> 個別性 = 10 */ h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> 個別性 = 11 */ ul ol li.red {} /* a=0 b=0 c=1 d=3 -> 個別性 = 13 */ li.red.level {} /* a=0 b=0 c=2 d=1 -> 個別性 = 21 */ #myid {} /* a=0 b=1 c=0 d=0 -> 個別性 = 100 */ #page #main {} /* a=0 b=1 c=0 d=0 -> 個別性 = 200 */ #page #main p {} /* a=0 b=2 c=0 d=1 -> 個別性 = 201 */ style="foo" /* a=1 b=0 c=0 d=0 -> 個別性 = 1000 */
補足ですが、p[id="foo"]
のようにid属性を使っても、属性セレクタとして計算されるため、個別性は「10」となります。
100として計算されるのはあくまでもIDセレクタを使った場合です。
これで先ほどの例を計算してみると、p.note
は個別性が「11」になり、.note
は個別性が「10」になるので、color: red;
が優先されるのがわかります。
感覚的により具体的な指定をするほど個別性が高くなるのが分かれば、都度計算せずとも特に問題は有りません。
この辺りは、有る程度慣れてくれば問題なく適用できるようになります。
また、これらの指定より優先させたい場合!important
宣言をする事で可能です。
!important
宣言は最重要規則と言うくらいですから、制作者スタイルシート(CSSファイルやHTMLに直接)に書かれている中では最優先されます。
仮に#id1 #id2 #id3...
のようにIDセレクタを使って個別性を数千にしても!important
宣言の前では無力です。
ですので本当に必要な時の最終手段として使うのがいいと思います。
この!important
宣言は以下のように記述します。
div.section {
margin-bottom: 30px !important;
}
これで、CSSファイルやstyle属性での優先度がわかったかと思いますが、これ以外にもユーザースタイルシートやブラウザのデフォルトスタイルなどがあり、これらの最終的な優先順位は以下のようになります。
- !important宣言付きのユーザースタイル
- !important宣言付きの制作者スタイル
- 制作者スタイル
- ユーザースタイル
- UA(ブラウザなど)のデフォルトスタイル
これら個別性の計算や優先順位を意識してCSSを書く事で不要な!important
宣言を無くせたり、スタイルが適用されないといった事を防げるようになります。