Web技術の基礎
<style>
#main p { color: red; }
.content p { color: green; }
p.note { color: blue; }
</style>
<div id="main" class="content">
<p class="note">Hello</p>
</div>ほかにスタイルの指定はないものとする。上のHTMLで、「Hello」の文字の色はどれか。
- A赤(red)
- B緑(green)
- C青(blue)
答えと解説を見る
正解：A. 赤(red)
複数の規則が同じ要素に当てはまるときは、セレクタの詳細度の高い規則が優先されます。詳細度は(IDの数, クラス・属性・疑似クラスの数, 要素の数)の組で比べ、#main p は (1, 0, 1)、.content p と p.note はどちらも (0, 1, 1) なので、IDを含む #main p の赤が使われます。詳細度が同じ規則どうしでは、後に書かれた規則が優先されます。style属性で直接書いた指定や !important は、これより優先されます。
- A. 正しい。IDを含む #main p の詳細度 (1, 0, 1) が最も高くなります。
- B. .content p の詳細度は (0, 1, 1) で、IDを含む規則より低くなります。また、同じ詳細度の p.note より前に書かれています。
- C. p.note は最後に書かれていますが、詳細度 (0, 1, 1) がIDを含む規則より低いので使われません。IDの規則がなければ青になります。