CSSにおける詳細度のルール

前の例では、両方のセレクタが同じで同じ優先度を持っていました。これは、下に書かれたプロパティが優先されることを意味します。

また、1つのページ要素が複数のセレクタに一致する状況もあります。この場合、プロパティが競合すると、より詳細度が高い、つまりより具体的なセレクタが優先されます。詳細度のルールを見ていきましょう。

ルール 1

クラスは常にタグセレクタよりも優先されます:

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

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

IDは常にクラスよりも優先されます:

<p id="elem" class="text">text</p>

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

同等の条件では、構成部分の数が多いセレクタが優先されます。例えば、 2つのタグセレクタがある場合、タグの数が多い方が優先されます:

<div>
	<p>text</p>
</div>

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

2つのクラスセレクタの場合、指定されているクラスの数が多い方が優先されます（そこにタグセレクタが含まれていても影響しません）:

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

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