18 Shares

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

idとclassで変わるCSS優先順位

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

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

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

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

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

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

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

idとclassの使い分け方

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

  • id は同じページで 1 回だけ使える
  • class は同じページで何回でも使える

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

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

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

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

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

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

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

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

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

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

  • レベルが同じならCSSは後から書いたものが優先(上書き)される

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

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

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

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

上書き処理のイメージはここで触れています。

レスポンシブWebデザイン対応のGoogle AdSense設置方法

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

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

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

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

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

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

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

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

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

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

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

  • id や class がついているとレベルが上がる

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

idとclassの優先順位

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

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

結果

文字は何色になる?

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

結果

文字は何色になる?

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

  • class より id のほうがレベルは上

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

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

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

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

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

結果

ここは何色になる?

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

まとめ

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

  1. 要素を特定した id
  2. id
  3. 要素を特定した class
  4. class
  5. タイプセレクタ

では問題です。

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

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

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

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

それでは、また。

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