CSSセレクタをなんとなく使ってきたため、説明しようとしたときに混乱したので整理。
詳細度で検索かけると正しい内容が出てくる一方で優先度、優先順位で検索かけると間違った情報が出てくるので困りもの。
参考サイト
詳細度 - CSS: カスケーディングスタイルシート | MDN
Specifishity :: Specificity with Fish
結論
以下の順にCSSが反映される。
1で決まらなければ2、2で決まらなければ3...と順に判定していく
-
!important規則が使用されているもの - インラインスタイルが使用されているもの
- IDセレクタ(
#idなど)の数が最も多いもの - クラスセレクタ(
.classなど)、属性セレクタ([attr]など)、疑似セレクタ(::hover,:nth-child()など)の数が最も多いもの - 要素セレクタ(
div,inputなど)の数が最も多いもの - より出現が遅いもの
検証
CSSセレクタ同士の比較と出現順による影響
<html>
<head>
<style>
#simple-sample .red {
color: red !important;
}
#simple-sample #yellow {
color: darkgoldenrod;
}
#simple-sample :nth-child(2) {
color: blue;
}
#simple-sample [attr] {
color: green;
}
#simple-sample .lightseagreen {
color: lightseagreen;
}
#simple-sample div {
color: purple;
}
</style>
</head>
<body>
<div id="simple-sample">
<div>
<span>要素セレクタの優先度が一番低い</span>
<div>
<span>要素セレクタの次に疑似セレクタなど</span>
<div attr>
<span>疑似セレクタと同じ優先度だが、後に記載されているものが優先される</span>
<div class="lightseagreen">
<span>クラスセレクタと同じ優先度だが、後に記載されているものが優先される</span>
<div id="yellow">
<span>要素セレクタ、疑似セレクタ、クラスセレクタの次にIDセレクタ</span>
<div style="color: orangered">
<span>セレクタを頑張って書いても基本的にインラインスタイルに負ける</span>
<div class="red">
<span>!importantはインラインスタイルすら無視する</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
あるセレクタがいくら多くても、上位のセレクタには勝てない
<html>
<head>
<style>
#many-sample :not(.a):not(.b):not(.c):not(.d):not(.e):not(.f):not(.g):not(.h):not(.i):not(.j):not(.k):not(.l):not(.m):not(.n) {
color: blue;
}
#many-sample .zzz {
color: green;
}
#many-sample #id-selector {
color: red;
}
</style>
</head>
<body>
<div id="many-sample">
<div>
<span>とても長いセレクタの影響を受ける</span>
</div>
<div class="zzz">
<span>同じレベルの要素数が少ないと負ける</span>
</div>
<div>
<span id="id-selector">上位のセレクタ(idセレクタ)には勝てない</span>
</div>
</div>
</body>
</html>