CSSの優先度について…

CSSの優先度について...

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

div#sampleの中のp.testの中のspan要素

 

[1] ・・・ 「div, #sample, p.test,span」
[2] ・・・ 「div, #sample, p,span」

 

CSS

 このような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が反映されない!ってときには優先度をチェックしてみてください。

タイトルとURLをコピーしました