mosya
mosya Business はこちら

CSSの詳細度について

詳細度とは

CSSには詳細度というものがあります。詳細度とはCSSの強さを決めるためのものです。
CSSのセレクターをより詳細に記述することで、セレクターに記述されたCSSが他のセレクターよりも優先されます。

例えば上のCSSでは、#container .textセレクターの方が、.textセレクターよりもより詳細にセレクターが記述されていることで詳細度が大きくなります。つまり、color: bluecolor: 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。

ReactやTypeScriptなどの周辺技術が学べる
オンライン学習サービスを作りました!

詳しくはこちら
mosya

mosyaはオンラインでHTML,CSS,JavaScriptを基本から学習できるサービスです。現役エンジニアが作成した豊富なカリキュラムに沿って学習を進めましょう。

© 2023 - mosya. All rights reserved.