CSSでは、ある特定の要素のセレクタに複数のスタイル指定ができますが、同じセレクタに別々の指定がされた場合は「個別性」の高いスタイルが優先して適用されます。
個別性とは?
スタイルを指定した詳細度のこと。最大4桁の正の整数で表されます。
実際の計算方法は次のとおりです。
1,000(a) | style属性がある場合 |
100(b) | セレクタに含まれているid属性の数 |
10(c) | セレクタに含まれているid以外の属性と、擬似クラスの数 |
1(d) | セレクタに含まれている要素、擬似要素の数 |
計算された個別性の値が大きいほど、優先されます。
*{} | a=0,b=0,c=0,d=0 | 0 |
li | a=0,b=0,c=0,d=1 | 1 |
li:last-child | a=0,b=0,c=0,d=2 | 2 |
ul li | a=0,b=0,c=0,d=2 | 2 |
p[class=”sample”] | a=0,b=0,c=1,d=1 | 11 |
li[id=”list”] | a=0,b=1,c=0,d=1 | 101 |
#sample | a=0,b=1,c=0,d=0 | 100 |
div#sample | a=0,b=1,c=0,d=1 | 101 |
style=”” | a=1,b=0,c=0,d=0 | 1,000 |
実際にふたつのスタイルをひとつの要素に指定してみて、どちらが優先されるのかを確認してみましょう。
HTML
1 2 3 |
<div id="sample"> <p class="test"><span>テキストの色は何色でしょうか?</span></p> </div> |
div#sampleの中のp.testの中のspan要素
[1] ・・・ 「div, #sample, p.test,span」
[2] ・・・ 「div, #sample, p,span」
CSS
1 2 3 4 5 6 |
div#sample p.test span{ color: red; …[1] } div#sample p span{ color:blue; …[2] } |
このようなhtmlとcssを記述した場合、計算式は下記のようになります。
[1] ・・・ 「a=0,b=1,c=1,d=3 → 113」
[2] ・・・ 「a=0,b=1,c=0,d=3 → 103」
結果、個別性がより高い[1]である「color: red;」が優先されテキストの色が赤色になります。
このように、計算することでCSSの優先度を確認できますので、万が一指定したCSSが反映されない!ってときには優先度をチェックしてみてください。