特異性

CSS ポッドキャスト - 003: 特異性

次の HTML と CSS を使用しているとします。

<button class="branding">Hello, Specificity!</button>

button {
  color: red;
}

.branding {
  color: blue;
}

競合するルールは 2 つあります。 1 つはボタンが赤色、もう 1 つは青色になります。 どのルールが要素に適用されますか？ 特異性に関する CSS 仕様のアルゴリズムについて CSS が競合するルールをどのように決定するかを理解するうえで重要です。

特異性はカスケードの 4 つの段階のうちの 1 つで これについては、前のモジュールであるカスケードで取り上げました。

特異性スコア

各セレクタルールにはスコアが与えられます。 具体性は合計スコアと考えることができ、各セレクタ タイプでは、そのスコアに向けてポイントを獲得できます。 スコアが最も高いセレクタが優先されます。

実際のプロジェクトでは バランスを取る作業は、ユーザーが想定する CSS ルールが実際に適用されることを確認することです。 複雑さを回避するためにスコアを低く抑えるのが一般的です。 スコアは必要なレベルにとどまるはずですが、 達成度を上げることを目指します。 将来的には、特に重要な CSS を適用することが必要になる可能性があります。 最高スコアを目指せば仕事は難しくなります。

セレクタタイプのスコア付け

セレクタの種類ごとにポイントが付与されます。 これらのポイントをすべて加算して、セレクタの全体的な特異性を計算します。

ユニバーサル セレクタ

ユニバーサル セレクタ（*） 0 ポイントになります。 つまり、ポイント数が 1 以上のルールがオーバーライドされます

* {
  color: red;
}

要素または疑似要素のセレクタ

要素（型） または疑似要素 1 ポイントの特異性が得られます。

タイプセレクタ

div {
  color: red;
}

疑似要素のセレクタ

::selection {
  color: red;
}

クラス、疑似クラス、属性セレクタ

クラス 疑似クラスまたは 属性セレクタは 10 ポイントの詳細を取得します。

クラスセレクタ

.my-class {
  color: red;
}

疑似クラスのセレクタ

:hover {
  color: red;
}

属性セレクタ

[href='#'] {
  color: red;
}

:not() 疑似クラス自体は、特異性の計算には何も追加しません。 ただし、引数として渡されたセレクタは特異性の計算に追加されます。

div:not(.my-class) {
  color: red;
}

このサンプルには 11 ポイントの特異性があります。 型セレクタ（div）が 1 つと、:not() 内に 1 つのクラスがあるためです。

ID セレクタ

ID 100 個の特異性を取得して、 ただし、属性セレクタ（[id="myID"]）ではなく ID セレクタ（#myID）を使用する必要があります。

#myID {
  color: red;
}

インライン スタイル属性

HTML 要素の style 属性に直接適用される CSS 特異性スコア 1,000 ポイントを得る。 つまり CSS でオーバーライドするには、 非常に具体的なセレクタを記述する必要があります。

<div style="color: red"></div>

!important ルール

最後に、CSS 値の末尾の !important の特異性スコアは 10,000 ポイントになります。 これは、1 つのアイテムで取得できる最も高い特異性です。

!important ルールが CSS プロパティに適用されている。 そのため、ルール全体のすべて（セレクタと宿泊施設）の特異性スコアが同じになるわけではありません。

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

理解度をチェックする

特異性スコアに関する知識をテストする

コンテキストの具体性

要素に一致する各セレクタの特異性は、まとめて加算されます。 次の HTML の例を考えてみましょう。

<a class="my-class another-class" href="#">A link</a>

このリンクには 2 つのクラスがあります。 次の CSS を追加すると、1 つの限定性が得られます。

a {
  color: red;
}

このルールのいずれかのクラスを参照します。 11 の特異性が追加されました。

a.my-class {
  color: green;
}

もう一方のクラスをセレクタに追加します。 21 の特殊性ポイントが追加されました。

a.my-class.another-class {
  color: rebeccapurple;
}

href 属性をセレクタに追加します。 今では 31 の特異性があります。

a.my-class.another-class[href] {
  color: goldenrod;
}

最後に、これらすべてに :hover 疑似クラスを追加します。 セレクタは最終的に 41 ポイントになります。

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

理解度をチェックする

特異性スコアに関する知識をテストする

特異性の可視化

図や特異度計算ツールでは 特異性は、多くの場合、次のように可視化されます。

左側のグループは id セレクタです。 2 つ目のグループは、クラス、属性、疑似クラスのセレクタです。 最後のグループは、要素セレクタと疑似要素のセレクタです。

参考までに、次のセレクタは 0-4-1 です。

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

理解度をチェックする

特異性可視化に関する知識をテストする

実用的に特異性を高める

次のような CSS があるとします。

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

次のような HTML を使用した場合:

<button class="my-button" onclick="alert('hello')">Click me</button>

ボタンの背景はグレーです これは、2 番目の選択ツールで 11 ポイントの限定度（0-1-1）が得られるためです。 これは、型セレクタ（button）が 1 つであるため、 （1 ポイント）と属性セレクタ（[onclick]）（10 ポイント）があります。

前のルール（.my-button）は 10 ポイント（0-1-0）を獲得します。 クラスセレクタが 1 つあるからです。

このルールを強化したい場合は クラスセレクタを次のように繰り返します。

.my-button.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

ボタンの背景が青になります これは、新しいセレクタの特異性スコアは 20 ポイント（0-2-0）になるためです。

特異度スコアが一致すると、最も新しいインスタンスが優先される

今はボタンの例をそのままにして、CSS を次のように変更しましょう。

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

ボタンの背景はグレーです 両方のセレクタの特異性スコアが同じ（0-1-0）ためです。

ソース注文のルールを切り替えると ボタンが青色になります。

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

新しい CSS が優先するのはこのインスタンスのみです。 そのためには、同じ要素を対象とする別のセレクタの特異性に一致する必要があります。

リソース

• CSS の仕様
• 特異性計算ツール
• MDN 特異性
• CSS の詳細度に関する具体的な情報
• もう一つの特異性計算ツール