先生と生徒の会話形式で理解しよう

生徒

「CSSのスタイルが効かないときがあるんですけど、どうしてですか？」

先生

「それはセレクタの優先順位（Specificity）が関係しているかもしれません。」

生徒

「優先順位って何ですか？CSSって下に書いた方が効くんじゃないんですか？」

先生

「CSSには“どのスタイルを適用するか”を決めるルールがあって、それを『優先順位（Specificity）』って言うんだよ。順番だけじゃないんだ。」

1. CSSセレクタの優先順位とは？

CSS（シー・エス・エス）は、Webページの見た目を整えるためのスタイルシートです。タグ（例えば

や

など）に対して色や大きさなどのデザインを指定できます。

しかし、同じ要素に複数のスタイルが指定された場合、「どれを適用するか？」という問題が出てきます。これを決めるのが「セレクタの優先順位（Specificity）」というルールです。

たとえば、次のようなCSSがあった場合、どちらの色が表示されるか分かりますか？


<style>
    p {
        color: green;
    }
    .text-red {
        color: red;
    }
</style>

<p class="text-red">こんにちは</p>

ブラウザ表示

この場合、クラスセレクタの「.text-red」の方が優先順位が高いので、文字は赤色になります。

2. セレクタの種類と優先順位の仕組み

CSSのセレクタにはいくつか種類があり、それぞれに「点数」がついています。点数が高い方が優先されるという仕組みです。

タグセレクタ（例：p、h1など） → 点数：1点
クラスセレクタ（例：.box、.text-redなど） → 点数：10点
IDセレクタ（例：#main、#headerなど） → 点数：100点
インラインスタイル（HTMLタグの中に直接書くstyle属性） → 点数：1000点

この点数の合計によって、どのスタイルが適用されるかが決まります。

3. 具体的な例で優先順位を理解しよう

以下のHTMLとCSSを使って、どのスタイルが適用されるか見てみましょう。


<style>
    p {
        color: blue;
    }
    .text-green {
        color: green;
    }
    #special {
        color: orange;
    }
</style>

<p id="special" class="text-green">これは何色になるでしょう？</p>

ブラウザ表示

この場合、IDセレクタ（#special）がもっとも強いので、「オレンジ色」になります。

4. セレクタの組み合わせによる優先順位の計算

セレクタを組み合わせると、それぞれの点数が合計されます。以下のようなスタイルがあるとします。


<style>
    div p {
        color: blue;
    }
    .content p {
        color: green;
    }
    #main p {
        color: red;
    }
</style>

<div id="main" class="content">
    <p>この文字は何色？</p>
</div>

ブラウザ表示

このときの点数は以下のように計算されます。

div p → タグセレクタ2つ → 1点 × 2 = 2点
.content p → クラス1つ＋タグ1つ → 10 + 1 = 11点
#main p → ID1つ＋タグ1つ → 100 + 1 = 101点

なので、「#main p」が一番強く、赤色になります。

5. CSSで困ったときの優先順位チェックのコツ

CSSで「スタイルが反映されない」と感じたときは、以下の点をチェックしましょう。

タグ・クラス・IDのどれを使っているか
同じ要素に複数のセレクタが使われていないか
書いた順番ではなく、点数の高さを意識する

また、Google Chromeの「検証ツール（F12キー）」を使えば、どのスタイルが実際に適用されているかを確認することができます。

6. インラインスタイルが最強な理由とは？

CSSの中で最も優先順位が高いのは「インラインスタイル」です。これはHTMLタグの中に直接style属性として書く方法です。


<p style="color: purple;">この文字は紫色になります</p>

ブラウザ表示

この方法は、特別な理由がない限りあまり使わない方がよいですが、どうしても強制的に色を指定したい場合に役立ちます。

7. !importantは使い方に注意

「!important（インポータント）」を使うと、優先順位に関係なくそのスタイルを無理やり適用できます。


<style>
    p {
        color: blue !important;
    }
</style>

<p style="color: red;">この文字は何色になる？</p>

ブラウザ表示

この場合は、CSSで!importantが使われているため、インラインのstyle属性よりも強く、青色になります。ただし、!importantはコードの管理がしにくくなるので、多用は避けましょう。

まとめ

CSSセレクタの優先順位を理解することの大切さ

ここまで、CSSセレクタの優先順位、いわゆるSpecificityについて学んできました。 CSSはとても便利なスタイル指定の仕組みですが、書いたはずのスタイルが反映されないと、初心者の方ほど混乱しやすいポイントでもあります。その原因の多くが「セレクタの優先順位」を正しく理解できていないことにあります。

CSSでは、単純に「あとから書いたスタイルが勝つ」というわけではなく、タグセレクタ、クラスセレクタ、IDセレクタ、インラインスタイルといったそれぞれの指定方法に強さの違いがあります。この強さを点数のように考えることで、なぜそのスタイルが適用されるのかを論理的に説明できるようになります。

点数の考え方で混乱が減る

記事の中で紹介したように、タグセレクタは一点、クラスセレクタは十点、IDセレクタは百点、インラインスタイルは千点というイメージで考えると、 CSSの挙動が一気に分かりやすくなります。複数のセレクタを組み合わせた場合は、それぞれの点数を合計して比較することで、どのスタイルが最終的に採用されるのかを判断できます。

この考え方を身につけておくと、 Web制作の現場でよくある「クラスを追加したのに色が変わらない」「CSSを書き足してもデザインが反映されない」といった悩みを冷静に解決できるようになります。 CSSセレクタの優先順位は、初心者から中級者へステップアップするためのとても重要な基礎知識と言えるでしょう。

まとめ用サンプルコードで復習しよう

ここで、これまで学んだ優先順位の考え方を整理するために、シンプルなサンプルコードをもう一度確認してみましょう。タグ、クラス、IDが同時に指定された場合に、どの色が適用されるのかを意識しながら見ることが大切です。


<style>
    p {
        color: blue;
    }

    .summary-text {
        color: green;
    }

    #summary {
        color: red;
    }
</style>

<p id="summary" class="summary-text">
    この文字は何色になるでしょうか
</p>

ブラウザ表示

この例では、タグセレクタ、クラスセレクタ、IDセレクタがすべて指定されています。点数で考えると、タグは一点、クラスは十点、IDは百点となり、最も点数が高いIDセレクタの指定が優先されます。そのため、文字色は赤色になります。このように一つひとつ整理して考えることで、 CSSの優先順位は決して難しいものではなくなります。

importantやインライン指定との付き合い方

記事の後半で触れたimportantやインラインスタイルは、非常に強力な指定方法です。どうしてもスタイルを強制したい場面では役立ちますが、使いすぎるとCSS全体の構造が分かりにくくなります。特にimportantを多用すると、どのスタイルがなぜ適用されているのか分からなくなり、後から修正するのが難しくなってしまいます。

まずはセレクタの優先順位を正しく設計し、タグ、クラス、IDを適切に使い分けることを意識しましょう。それでも解決できない場合の最終手段として、 importantやインラインスタイルを使う、という考え方を持つことが大切です。

先生と生徒の振り返り会話

生徒

「CSSが効かない理由って、ただ書き方を間違えているだけじゃなくて、優先順位の問題だったんですね。」

先生

「そうなんです。 CSSはルールを理解すると、どうしてその結果になるのかを説明できるようになります。」

生徒

「点数で考える方法を知ったら、デベロッパーツールで見るのも怖くなくなりました。」

先生

「それはとても良いことですね。 CSSセレクタの優先順位を理解できれば、レイアウト調整やデザイン変更も自信を持ってできるようになりますよ。」