CSSの優先順位

CSSは基本的に後に書いたもの（読み込んだもの）が優先されるようになっていますが、そうならない場合もあり、自分の思った通りのスタイルが適用できず、困ることもしばしば。
今回紹介するCSSの優先順位の決定方法さえ覚えておけば、そんなこともなくなります。

まあ、タイトルに書いた通りなんですが、身に覚えのある人も無い人も次のクイズに答えてみてください。

答えを決めたら解答を見てみよう

<div id="sample">
 <ul class="sample2">
  <li><p class="toi">さて、ここは何色になるでしょう？</p></li>
 </ul>
</div>

#sample p{color:red;}赤
.sample2 p{color:blue;}青
li p{color:black;}黒
.toi{color:green;}緑
p{color:yellow;}黄色

後のものほど優先なら黄色･･･。いや、わざわざclassを指定したのだから緑･･･？それとも･･･？

上のクイズ、答えは「赤」でした。正解した人は、以下の説明は読まなくてもＯＫです。

さて、答えを見れば一目瞭然。class="toi"を設定したのに効果を発揮していない。一部分だけスタイルを変えたいときに使うclassが全く役に立っていない。クイズだからいいものの、自分が作成中のページでこんな目にあったら？ 嫌になりますよね。

なぜ、classが効果を発揮しなかったかというと、CSSの優先順位はセレクタの獲得ポイントで決まるからです。獲得ポイントが少なければclassやidを指定していても効果を発揮しないことがあります。

以下はポイントの獲得ルール

*（全称セレクタ）     ０ポイント
p,h1　などのタグ      １ポイント
.sample（classの場合）１０ポイント
#sample（IDの場合）   １００ポイント

ポイントはセレクタを複数並べることで加算されていく

p.sample＝１＋１０＝１１ポイント
.sample p＝１０＋１＝１１ポイント
.sample li p＝１０＋１＋１＝１２ポイント
#sample .sample＝１００＋１０＝１１０ポイント
#sample .sample p＝１００＋１０＋１＝１１１ポイント

獲得ポイントが同じならば、後に書いたスタイルが優先される。

さて、なぜclass="toi"が効果を発揮しなかったかはもうおわかりですね。そう、ポイントが10点しかなかったから。 #sample pの101ポイントに負けてしまったからです。では、どうすればclass="toi"が使い物になるか？それは

#sample .toi{color:green;}緑

と書けばＯＫです。

今回のクイズのような事態はしばしば起こります。とくに子孫セレクタ（半角スペースで区切っていくやり方）を多用している場合や、複雑な入れ子を作っているときによく起こります。

セレクタを詳しく書けば回避できますが、そうすると今度はCSSが読みにくくなる。どこで折り合いをつけるかは自分の判断で行うしかないですね。

獲得ポイントのルールを上手く使って、上手にスタイルシートを書いてくださいな。

---