CSSセレクタの競合を解説！初心者でもわかる対処法と書き方のコツ
生徒
「先生、CSSを書いてたら思った通りのデザインになりません。色が変わらなかったり、文字サイズが反映されなかったりして困ってます…」
先生
「それはCSSセレクタの競合が原因かもしれませんね。複数のスタイルがぶつかったときに、どれが優先されるか決まっているんですよ。」
生徒
「えっ！？そんなルールがあるんですか？どうやって判断するんですか？」
先生
「じゃあ、セレクタの競合とその解決方法について、順番にわかりやすく解説していきましょう！」
1. CSSセレクタの競合とは？
まず、「CSSセレクタ（しーえすえす・せれくた）」というのは、どのHTML要素にスタイル（色やサイズなど）を適用するかを指定するためのものです。
たとえば、<p>タグ全体の文字の色を青くしたいときは、pセレクタを使います。でも、同じ<p>に対して、別の場所で「赤」にするスタイルを書いてしまったら、どちらが適用されると思いますか？
このように、複数のセレクタが同じ要素をねらってスタイルを当てようとすると、「どちらが勝つか」を決める必要が出てきます。これが「セレクタの競合（きょうごう）」です。
2. セレクタの優先順位を理解しよう（基本ルール）
CSSには「優先順位（ゆうせんじゅんい）」というルールがあり、次の順番でどのスタイルが強いかが決まります。
- 1位：インラインスタイル（HTMLの中に直接書いたスタイル）
- 2位：IDセレクタ（例：#main）
- 3位：クラスセレクタ、擬似クラス、属性セレクタ（例：.box, a:hover）
- 4位：要素セレクタ（例：p, h1, divなど）
この順位が高いほど、スタイルが優先されて適用されます。
3. 具体的なCSSセレクタの競合例
それでは、次のようなHTMLとCSSがあるとき、文字の色は何色になるでしょうか？
<style>
p {
color: green;
}
.text-red {
color: red;
}
#main-text {
color: blue;
}
</style>
<p id="main-text" class="text-red">これはテストです</p>
この場合、「green（緑）」は要素セレクタ、「red（赤）」はクラスセレクタ、「blue（青）」はIDセレクタです。先ほどの優先順位にしたがって、最も強いIDセレクタが勝ちます。つまり、表示される文字色は青になります。
4. !important（インポータント）を使って強制的に適用する
もしどうしても特定のスタイルを優先したいときには、「!important（いんぽーたんと）」を使う方法があります。
これは「このスタイルを絶対に適用して！」という命令になります。
<style>
p {
color: green !important;
}
.text-red {
color: red;
}
#main-text {
color: blue;
}
</style>
<p id="main-text" class="text-red">これはテストです</p>
この場合、緑色に「!important」がついているので、IDやクラスよりも強くなり、文字は緑色になります。
ただし、!importantを多用すると管理が大変になるので、基本的にはセレクタの整理で解決するのが理想です。
5. セレクタの優先順位を活かして正しくデザインしよう
セレクタが競合する場合、「セレクタの種類」と「指定の仕方」でどちらが適用されるかが決まります。
例えば、次のようにセレクタを詳しく書くと、より優先されます。
<style>
p {
color: gray;
}
section p {
color: orange;
}
</style>
<section>
<p>セクションの中の段落です</p>
</section>
この例では、「section p」は「p」単体よりも詳しい指定なので、オレンジ色が適用されます。これも競合の一種で、より具体的な指定が優先されることを覚えておきましょう。
6. セレクタの競合を防ぐためのポイント
セレクタが競合するとデザインが思った通りに表示されず、初心者の方には混乱のもとになります。以下のような工夫で、競合を減らしましょう。
- クラス名はわかりやすく、重ならない名前にする
- 使うセレクタの種類を整理する（IDは1ページに1回だけ）
- なるべく詳細なセレクタでスタイルを指定する
- !importantの使用は本当に必要なときだけ
初心者の方は、まずは基本のルールを覚えることが大切です。セレクタを上手に使えば、HTMLページの見た目を自由自在にコントロールできます。
この記事を読んだ人からの質問
