CSSが効かないときの優先順位チェック(2)～id・class編

CSS 優先順位の解説 2 回目です。

前回は「スタイルシートをどこに書くかで優先順位が変わる」という内容でした。

今回は id 属性と class 属性に関連した優先順位を解説していきます。少し難しくなりますが、何度か読んで試していけばすぐわかりますよ！

HTMLのidとclassは何が違うのか

HTML で使われるほとんどの要素（タグ）で id 属性もしくは class 属性を使うことができます。

<div id="sample01"> ～ </div>
<div class="sample02"> ～ </div>

WordPress テーマをカスタマイズしていると、こんなものがたくさん見つかりますよね。これは div 要素に id や class をつけて、CSS でレイアウトしたり装飾するのが主な目的です。

スタイルシートでは、id が半角シャープ「#」に、class が半角ピリオド「.」となります。

#sample01 { color: red; }
.sample02 { color: blue; }

idとclassの使い分け方

id と class の違いをものすごく簡単に言うと…

実際には同じ id を複数使っても、ブラウザはそれなりに処理して表示してくれます。

ただし HTML の構造が適当だと検索エンジンが正しくページを評価できないため、SEO では好ましくないとされています。

大幅にデザインを変更したりカスタマイズしたあとは、いちどチェックすると良いでしょう。

参考HTML・CSS・WordPressテーマをチェックできる無料サービス一覧

また、id はスタイル指定以外にも使用します。たとえばこのブログでも表示している「目次」は、id をもとに各項目へ移動させる仕組みです。もし同一 id が複数あったら正確に移動することができません。

一般的には、各ページでひとつしかないヘッダーやフッターなどレイアウトに関わる要素には id をつけ、文字を赤くするなどのスタイリングが目的の要素には class をつけることが多いですね。

では、この id と class の力関係を見てみましょう。

CSS優先順位の基本と複合パターン

原則として後から書いたものが優先される

これからいくつかの競合パターンをご紹介していきますが、その前に優先順位の超基本形を覚えておきましょう。

シンプルに id も class もつけない指定を外部スタイルシートに記述したとします。

span { color: red; }
span { color: yellow; }
span { color: blue; }

この場合、一番最後に書かれている「 color: blue 」が反映されます。

実際にこんな連続した書き方はしないと思いますが、1000 行を超えるスタイルシートだとどこに何があるかわからず、重複して指定することがあるでしょう。

また、このルールはレスポンシブ Web デザインでも応用されているので、覚えておくと編集作業がスムーズにいくかもしれませんね。

このルールは、id や class の指定でも同じです。

.sample03 { color: red; }
.sample03 { color: yellow; }
.sample03 { color: blue; }

sample03 のクラスがつけられている要素では、文字が青色になります。

このように “レベルが同じ” であれば後から書いたものが優先されますが、レベルが変わると優先順位も変わります。

タイプセレクタとidまたはclassの優先順位

“レベルが変わる” とはどういうことなのでしょうか。

こちらのケースで考えてみましょう。

<span class="red">ここは何色になる？</span>

CSS は次のように指定されています。

.red { color: red; }
span { color: black; }

1 行目を class セレクタ、2 行目をタイプセレクタと呼びます。

「後から書いたものが優先される」のであれば文字は黒になりそうですが、実はこの 2 つはレベルが違うのでそのルールから外れます。

力関係は「 class ＞ タイプ 」となっており、レベルが上のものが反映されます。つまり文字は赤くなるわけですね。

id の場合も同じで、「 id ＞ タイプ 」という力関係になります。

それでは id と class だとどうなるのでしょうか。

idとclassの優先順位

ひとつの要素に対して id と class を両方使用することができます。以下のケースで考えてみましょう。

<p id="sample01" class="sample02">文字は何色になる？</p>

#sample01 { color: red; }
.sample02 { color: blue; }

力関係は「 id ＞ class 」となっており、id のほうがレベルは上です。そのため、後から書かれている class は負けてしまい文字が赤くなります。

では class にだけ font-size を追加してみましょう。

#sample01 { color: red; }
.sample02 { color: blue; font-size: 150%; }

文字色は id が優先されるので赤になりますが、font-size はかぶっていないので class に指定されている値が反映されます。

要素を特定するとさらにレベルが上がる

CSS は要素を特定して id や class を付与することができます。

span.red { color: red; }

この場合、<span class=”red”> にだけスタイルが反映されます。

<p class="red">ここは反映されない</p>
<span class="red">ここは反映される</span>

では、以下のケースはどうなるでしょうか。

span.colorful { color: green; }
.colorful {color: pink; }

<span class="colorful">ここは何色になる？</span>

力関係は「要素を特定した class ＞ class のみ」となります。つまり、<span> で囲まれた文字は緑色になるというわけです。

id も同じく、要素を特定したほうがレベルは高くなります。

まとめ

今日出てきたものをレベルの高い順で並べてみましょう。

では問題です。

以下の場合に文字の大きさは何 px になるでしょう。

span#bigsize { font-size: 30px; }
#bigsize { font-size: 20px; }
span.smallsize { font-size: 10px; }
.smallsize { font-size: 5px; }
span { font-size: 16px; }

<p id="bigsize" class="smallsize">文字の大きさは？</p>

要素の特定は意外と知られていないかもしれませんね。最低限、id と class の力関係だけでも覚えておいてください。

さて、優先順位はこれだけではありません。次回は今までに解説してきた要素に加えてさらに複雑なパターンを考えてみたいと思います。

NEXTCSSが効かないときの優先順位チェック(3)～点数計算編

それでは、また。

※答えは「20px」です。いやらしい問題ですね…