詳細度の概念
詳細度は、どのプロパティ値が最もある要素に関係があり、適用されるかをブラウザが決定する手段です。詳細度は異なる順のセレクタで構成されるマッチング規則にのみ基づきます。
どのように計算するか
詳細度はそれぞれのセレクタ型の数の連結で計算されます。それは、一致するマッチング表現を適用する重みではありません。
詳細度が等しい場合は、 CSS で発見される最も後の宣言が要素に適用されます。
詳細度の序列（昇順）
以下のリストは、セレクタを詳細度の小さな順に並べたものです。
- 全称セレクタ
- タイプセレクタ
- クラスセレクタ
- 属性セレクタ
- 擬似クラス
- ID セレクタ
- インラインスタイル
!important の例外
!important 規則がスタイル宣言で使われたとき、それが宣言リストのどこであっても、この宣言は CSS 内で作られたその他の宣言を上書きします。しかし、 !important は詳細度とは無関係です。
:not の例外
否定擬似クラスの :not は詳細度の計算では擬似クラスとは見なされません。しかし、否定擬似クラスの中に置かれたセレクタは、通常のセレクタのように計算されます。
以下の CSS を...
div.outer p {
color:orange;
}
div:not(.outer) p {
color: lime;
}
以下の HTML に適用した場合...
<div class="outer">
<p>This is in the outer div.</p>
<div class="inner">
<p>This text is in the inner div.</p>
</div>
</div>
画面では、以下のように表示されるでしょう。
This is in the outer div.
This text is in the inner div.
型ベースの詳細度
詳細度は、セレクタの型に基づきます。以下の場合、セレクタは ID を選択しているにもかかわらず、詳細度の決定アルゴリズムにおいて、それは属性として計算されます。
以下のスタイル宣言を...
* #foo {
color: green;
}
*[id="foo"] {
color: purple;
}
この HTML に対して適用すると...
<p id="foo">I am a sample text.</p>
このようになってしまうでしょう。
I am a sample text.
なぜなら、それは同じ要素にマッチしますが、 ID セレクタがより上の詳細度をもっているからです。
文書ツリー内の近さの無視
以下のスタイル宣言と...
body h1 {
color: green;
}
html h1 {
color: purple;
}
以下の HTML で...
<html> <body> <h1>Here is a title!</h1> </body> </html>
このように描画されるでしょう。
Here is a title!
関連情報
- CSS3 Selectors Specificity - https://www.w3.org/TR/selectors/#specificity
- CSS の主要概念: CSS 構文、 詳細度、 継承、 ボックスモデル、 レイアウトモード、 視覚フォーマットモデル、 マージンの相殺、 値 (initial / computed / used / actual)、 値の定義構文、 ショートハンドプロパティ、 置換要素