【CSS初心者向け】なぜスタイルが効かない？詳細度の完全ガイド

皆さんこんにちは！かたすけです。

CSSを書いていると、「思い通りのスタイルにならない！」という悩みに直面することがありますよね。その原因が、この記事で解決できるはずです！

かたすけ

「詳細度」というものが関係しているよ！

この記事では、CSSの詳細度について、その計算方法から、実践的な使い方、そしてスタイルが効かない時の解決策まで、徹底的に解説します。これを読めば、もうCSSの優先順位で迷うことはなくなるでしょう。

CSSの基礎はこちら！↓

1. 詳細度（Specificity）とは何か？

詳細度とは、ブラウザが複数のCSSルールの中から、どれを優先して適用するかを決定するための「重み」のことです。同じ要素に対して複数のCSSルールが適用される場合、詳細度が高いルールが優先されます。

例えば、以下のHTMLがあるとします。

<p class="text" id="main-text">Hello, world!</p>

この<p>要素に対して、2つのCSSルールが記述されていた場合、ブラウザはどちらを適用するでしょうか？

p {
  color: red;
}

#main-text {
  color: blue;
}

この場合、#main-textのルールが優先され、テキストは青色になります。これは、idセレクタがp（要素）セレクタよりも詳細度が高いからです。

詳細度は、以下の4つのカテゴリーに分けて計算されます。これは、「(a, b, c, d)」という4つの桁の数字で表され、左の桁ほど優先順位が高くなります。

a: インラインスタイル（Inline Styles）
- HTMLタグのstyle属性に直接記述されたスタイルです。これが最も詳細度が高く、常に最優先されます。ですが、基本的にこの記述方法は推奨されません。
- 計算値：1, 0, 0, 0
b: IDセレクタ（ID Selectors）
- #で始まるセレクタ（例：#main-text）。
- 計算値：0, 1, 0, 0
c: クラス、属性、擬似クラスセレクタ
- .で始まるクラス（例：.text）、[]で囲まれた属性（例：[type="button"]）、:で始まる擬似クラス（例：:hover、:focus）。
- 計算値：0, 0, 1, 0
d: 要素、擬似要素セレクタ
- HTML要素名（例：p、div）、::で始まる擬似要素（例：::before、::after）。
- 計算値：0, 0, 0, 1

以下のCSSルールが適用される場合を考えてみましょう。

p { color: red; }
- 計算値：p（要素セレクタ）が1つ。→ (0, 0, 0, 1)
.main-text { color: blue; }
- 計算値：.main-text（クラスセレクタ）が1つ。→ (0, 0, 1, 0)
div p#my-id.my-class { color: green; }
- 計算値：idが1つ、classが1つ、pとdiv（要素）が2つ。→ (0, 1, 1, 2)

この場合、詳細度の計算値は (0, 1, 1, 2) > (0, 0, 1, 0) > (0, 0, 0, 1)となるため、color: green;が最終的に適用されます。

詳細度の計算を理解すれば、CSSが効かない時の原因を特定しやすくなります。以下のチェックリストを参考にしてください。

詳細度の高いセレクタが上書きしていないか？
- 最もよくある原因です。特に、idセレクタやインラインスタイルが、意図しないスタイルを上書きしているケースが多いです。開発者ツールで要素を右クリックし、「要素を検証」して適用されているスタイルを確認しましょう。
!importantが使われていないか？
- !importantは、詳細度を無視して強制的にスタイルを適用する指定です。これは非常に強力なため、安易に使うと他のスタイルをすべて破壊し、コードの管理を非常に困難にします。原則として、!importantの使用は避けるべきです。
セレクタの記述ミスはないか？
- クラス名やID名がスペルミスしていないか、セレクタの間にスペースが正しく入っているか（子孫セレクタか、直接の子セレクタかなど）を確認しましょう。
後のルールが上書きしていないか？
- 詳細度が同じ場合、より後に記述されたルールが優先されます。意図しないスタイルが後に書かれていないか確認しましょう。

詳細度を考える上で、継承（Inheritance）の概念も重要です。font-sizeやcolorなどのプロパティは、親要素から子要素に継承されます。

<div style="color: red;">
  <p>このテキストの色は何色になる？</p>
</div>

この場合、<p>要素にはcolorが指定されていませんが、親要素である<div>からcolor: red;が継承されるため、テキストは赤色になります。

しかし、継承されたスタイルは、詳細度では最も低いと見なされます。そのため、<p>要素に直接スタイルが指定されていた場合、そちらが優先されます。

p {
  color: blue; /* 詳細度: (0, 0, 0, 1) */
}

この場合、継承されたcolor: red;よりも、直接指定されたcolor: blue;の方が詳細度が高いため、テキストは青色になります。

大規模なプロジェクトでは、CSSの詳細度を管理することが非常に重要になります。そこで推奨されるのがBEM（Block, Element, Modifier）などの命名規則です。

BEMは、すべてのセレクタをクラスで記述することを原則としています。これにより、詳細度の計算を「0, 0, 1, 0」に統一し、CSSの優先順位を分かりやすくします。

これにより、誰が書いても同じ詳細度となり、保守性の高いコードを書くことができます。

CSSの詳細度は、ただの理論ではありません。実際にコードを書く上で常に意識すべき重要な概念です。

これらのポイントを実践することで、より効率的でクリーンなコードを書けるようになるはずです。CSSの学習は、この詳細度を理解することが非常に重要です。

ぜひあなたのコードと照らし合わせて、思い通りのデザインにしましょう！

最後まで読んでいただき、ありがとうございました！