CSSセレクタの詳細度

MARKLEAPS

2023.11.09

CSSが適用されない原因になり得る「詳細度」についてまとめました。

CSSの詳細度とは、同じ要素に複数のセレクタでスタイルが指定されている場合、どのスタイルを適用するのかを決定する優先順位のようなものです。

↑ 詳細度高
IDセレクタ（例：#header など）
クラスセレクタ、属性セレクタ、擬似クラス（例：.nav 、[type=”text”] 、:hover など）
要素セレクタ、擬似要素（例：p 、::before など）
ユニバーサルセレクタ（*）
↓ 詳細度低

セレクタは詳細度の点数を持っており、下記のようなルールで採点します。

点数の合計値が大きいほど、詳細度が高くなります。

/* IDセレクタが1つ、クラスセレクタが1つで、1.1.0 */
#header .nav {}

/* クラスセレクタが2つ、要素セレクタが1つで、0.2.1 */
.nav .menu a {}

/* IDセレクタが1つ、クラスセレクタが1つで、1.1.0 */

#header .nav {}

/* クラスセレクタが2つ、要素セレクタが1つで、0.2.1 */

.nav .menu a {}

セレクタの詳細度とは別の仕様で、以下の2つがあります。
いずれも、多用するとサイトのメンテナンス性を損なうことになる為、極力使わないことが望ましいです。

他のプロパティを強制的に上書きするため、優先度が最も高くなります。
本来の優先順位を強制的に変えてしまう手法です。

HTMLタグにstyle属性を指定して直接スタイルを適用する方法です。
インラインスタイルは、常に外部スタイルシートの中のスタイルを上書きします。
!importantの次に優先度が高くなります。

CSS

よく読まれている関連記事