CSSのセレクタの優先順位

CSS SCSS

CSSのセレクタの優先順位

CSSのセレクタの優先順位は、スタイルの適用に関する重要な概念で、複数のスタイルルールが同じ要素に対して適用される場合にどのルールが優先されるかを決定します。
優先順位は、通常「特異性（specificity）」という概念で表され、以下のような順序で決まります。

1. インラインスタイル（Inline Styles）:

  • HTML要素に直接設定されたスタイルは、最も高い優先順位を持ちます。

例: div

2. IDセレクタ:

  • IDセレクタは、特異性の値が高く、同じ要素に複数のIDセレクタが適用される場合は最も優先されます。

例: #test-id

3. クラス、属性、および擬似クラスセレクタ:

  • クラスセレクタ（例: .test-class）、属性セレクタ（例: [type="text"]）、および擬似クラスセレクタ（例: :hover）は、IDセレクタよりも特異性が低いです。

4. 要素および擬似要素セレクタ:

  • 要素セレクタ（例: div）や擬似要素セレクタ（例: ::before）は、最も特異性が低いです。

特異性の計算は、以下のルールに基づいて行われます：

  • インラインスタイルは常に最優先です。
  • セレクタの特異性は、IDセレクタ、クラスセレクタ、要素セレクタの順で加算されます。

特異性は数値で表現され、例えば、#test-idは特異性の値が「1,0,0,0」になります。
クラスセレクタ .test-class は「0,1,0,0」、要素セレクタ div は「0,0,1,0」となります。

特異性の値を計算する方法：
1. セレクタの各部分の特異性を数値で表現します（インラインスタイルは特異性「1,0,0,0」）。
2. IDセレクタの数が多いほど、特異性の値は高くなります。
3. クラスセレクタの数が多いほど、次に高い特異性の値が設定されます。
4. 要素セレクタの数が多いほど、最も低い特異性の値が設定されます。

例を通して理解すると、以下のCSSがあるとします：

#header {
  color: blue;
}

.header {
  color: green;
}

div {
  color: red;
}

ここで、HTMLが次のように設定されているとします：

<div id="header" class="header">Hello</div>

この場合、要素に適用される色は青になります。
なぜなら、IDセレクタ（#header）がクラスセレクタ（.header）や要素セレクタ（div）よりも特異性が高いためです。

セレクタの優先順位を理解して、複雑なスタイリングルールを適切に管理することは、CSSを効果的に活用するために非常に重要です。