あかつきのお宿

HTMLタグにidやclassを振って、その中のタグにスタイルを利かせるような場合がありますよね。

あれって、idの中にあるのかclassの中にあるのかで、効果の優先順位が違ったんですね。初めて知りました。

結論からいうと、classよりもidの方が優先順位が高いみたい。

#test a {
  text-decoration:none;
}

.test a {
  text-decoration:underline;
}

まあ、例えばこんな感じのスタイルが定義されてるとするじゃないですか。

んで、HTMLがこう↓

<div id="test">
    <p class="test"><a href="#">sample</a></p>
</div>

こう書くと、sampleのところのリンクには下線がつきません。#test a の方が優先されるようです。

いやね、うちのサイトも本文中のh4にスタイル振ってるんだけど、基本、h4はあのトップページで出てる変なインフォメーションマークっぽい背景画像を当ててるんですよ。



こいつは #main h4みたいな感じで指定してるんですが、そのおかげでブログ本文中のh4の方にもこの余計な背景画像が出ちゃってたんですね。ブログの本文にはentry-contentみたいなクラスがデフォルトで当たってたんで、そのまま.entry-content h4でごちゃごちゃ指定したんですが、何も利かないの。

スペルミスとかものすげー疑ったんですけど、結局問題は解決しなくて、こちらのサイトさんの記事を読んだところ、まあ何かCSSにはどっかのハンティングゲームみたいに獲得ポイントがあるらしく、それによって優先順位が決まるのだとか。



やっぱりCSSは奥が深いですね。まだまだ知らないことがたくさんありそうだ。