CSSの詳細度について
詳細度とは
CSSには詳細度というものがあります。詳細度とはCSSの強さを決めるためのものです。
CSSのセレクターをより詳細に記述することで、セレクターに記述されたCSSが他のセレクターよりも優先されます。
例えば上のCSSでは、#container .text
セレクターの方が、.text
セレクターよりもより詳細にセレクターが記述されていることで詳細度が大きくなります。つまり、color: blue
がcolor: red
よりも優先され、結果として青色の文字が表示されます。
詳細度の計算方法
詳細度は、セレクター内に含まれる3つのカテゴリー(IDの数、クラス名の数、タグ名などの)要素の数に基づいて計算されます。
一般的な詳細度の計算方法は次のとおりです。
-
IDセレクター : IDセレクターが使われている場合(例:
#container
)は、詳細度は(1,0,0)になる。 -
クラスセレクターや属性セレクター、疑似クラスセレクター :クラス、属性、および擬似クラスセレクターが使われている場合(例:
.text
、[type="submit"]
、:hover
)は、詳細度は(0,1,0)になる。 -
要素セレクターや疑似要素セレクター : 要素および擬似要素セレクターが使用されている場合(例:
p
、::before
)は、詳細度は(0,0,1)になる。
左から見て数値が大きいほど、そのCSSの優先度が高いです。
これを踏まえると、例えば、#container .text
というセレクターでは、IDセレクターが1つ、クラスセレクターが1つ含まれています。
したがって、詳細度は(1,1,0)となります。
一方、.text
というセレクターでは、クラスセレクターが1つのみ含まれているため、詳細度は(0,1,0)となります。
詳細度が高いセレクターのスタイルが優先されるため、#container .text
セレクターのスタイルが適用されます。
Authored by
Godai@steelydylan
Webサービスを作るのが好きなWebエンジニア。子供が産まれたことをきっかけに独立し法人化。サービス開発が大好き。
好きな言語はTypeScript。