CSS 特異性

特定性とは何ですか？

同一要素に対する二つ以上の衝突するCSSルールがある場合、ブラウザはどれが最も具体的かを決定するためのいくつかの原則に従って、その結果を優先します。

特定性（specificity）を得点/評価として捉えると、最終的にどのスタイル宣言が要素に適用されるかを決定できます。

全般選択子（*）は低い特定性を持ち、ID選択子は高い特定性を持っています！

注意：この特定性は、CSSルールが一部の要素に適用されない一般的な理由であり、適用されるべきだと思われるかもしれません。

特異性の階層

各選択子は特異性の階層構造における位置を持っています。以下の四つのカテゴリは選択子の特異性レベルを定義します：

インラインスタイル - インライン（内联）スタイルは直接設定する要素に追加されます。例：<h1 style="color: #ffffff;">。

ID - IDはページ要素のユニークな識別子です。例：#navbar。

クラス、属性、および擬似クラス - このカテゴリには .classes、[attributes]、および擬似クラス（例：:hover、:focusなど）が含まれます。

要素と擬似要素 - このカテゴリには要素名や擬似要素（例：h1、div、:before、:after）が含まれます。

特異性をどう計算しますか？

特異性の計算方法を必ず覚えておいてください！

0から始めて、style属性には1000、各IDには100、各属性、クラス、または擬似クラスには10、各要素名または擬似要素には1を追加します。

以下の三つのコードスニペットを考えてみてください：

例

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
  • Aの特異性は1（1つの要素）
  • Bの特異性は101（1つのID参照および1つの要素）
  • Cの特異性は1000（インラインスタイル）

1 < 101 < 1000 のため、第三のルール（C）が高い特異性を持つため、適用されます。

特異性ルール 1：

特異性が同じ場合：最新のルールが重要です - 同じルールを外部スタイルシートに二度書きすると、スタイルシートの後ろの規則が設定する要素に近い位置になるため、適用されます：

例

h1 {background-color: yellow;}
h1 {background-color: red;}

実際に試してみましょう

次のルールは常に適用されます。

特異性ルール 2：

ID 選択子は属性選択子よりも高い特異性を持っています - 以下の三行コードをご覧ください：

例

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

実際に試してみましょう

最初のルールは他の二つのルールよりも具体的で、そのため適用されます。

特異性ルール 3：

上下文選択子は単一の要素選択子よりも具体的です - 嵌入式スタイルシートは設定する要素に近い位置にあります。以下の状況では：

例

外部の CSS ファイルから：

#content h1 {background-color: red;}

HTML ファイル内で：

<style>
#content h1 {
  background-color: yellow;
}
</style>

次のルールが適用されます。

特殊性ルール 4：

クラス選択子は任意の数の要素選択子を優先します - クラス選択子（例えば .intro は h1、p、div などに優先します）：

例

.intro {background-color: yellow;}
h1 {background-color: red;}

実際に試してみましょう

さらに、汎用選択子および継承された値は 0 を持ちます - * の特殊性、body * および類似のものは 0 です。継承された値の特殊性も 0 です。