CSSにおける子孫セレクタの優先順位

これまでのすべてのレッスンでは、すべてのセレクタは要素自体を対象とする必要がありました。あるセレクタは要素を対象とし、別のセレクタはその要素の親を対象とする場合があります。

親に例えば色が指定されている場合、その色は子孫に継承されることは既にご存知でしょう。しかし、子孫にも色が指定されている場合、子孫のセレクタは親のセレクタよりも高い優先順位を持ちます。

これは、子孫のタグセレクタが親のクラスを上回ることを意味します：

<div class="block">
	<p>text</p>
</div>

.block {
	color: red;
}
p {
	color: green; /* この色が適用されます */
}

子孫のタグセレクタは、親のIDも上回ります：

<div id="block">
	<p class="text">text</p>
</div>

#block {
	color: red;
}
.text {
	color: green; /* この色が適用されます */
}