目次
01. セレクタの優先順位
02. 使用例
CSSのセレクタの優先順位とは
CSSのセレクタには、詳細度と呼ばれる点数があります。
セレクタの詳細度の大きい(より特定される)ものが優先されます。
名称 | 例 | 点数 | 優先度 |
---|---|---|---|
全称セレクタ | * | 0 | 小 |
疑似要素 | ::before | 1 | |
タイプセレクタ (要素型セレクタ) |
p | 1 | |
擬似クラス | :link | 10 | |
属性セレクタ | [type="text"] | 10 | |
クラスセレクタ | .p1 | 10 | |
IDセレクタ | #p1 | 100 | |
インラインスタイル | style="..."; | 1000 | 大 |
詳細度が等しい場合は、 CSSで後に記述されたものが適用されます(後勝ち)。
!importantをつけると上記の優先度を無視して!importantがある箇所の優先度が一番強くなります。
以下は、MDNの詳細度の概念のリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity
同じセレクタの場合は後勝ちになる
<style>
#p1 {
background-color: red;
}
#p1 {
background-color: blue;
}
</style>
<p id="p1">テスト1</p>
2行目と5行目は、同じセレクタです。
5行目が後勝ちになるので背景色は青になります。
IDセレクタとインラインスタイルがある場合
<style>
#t1 {
background-color: SkyBlue;
}
</style>
<p id="t1" style="background-color: Orange">テスト1</p>
インラインスタイルの方が詳細度が大きい(より特定される)のでオレンジが表示されます。
!importantがある場合
<style>
.t2 {
background-color: SkyBlue !important;
}
</style>
<p class="t2" style="background-color: Orange">テスト2</p>
2行目は、!importantがあります。
本来であれば6行目のインラインスタイルが優先されますが、2行目に!importantの指定があるので2行目の色が適用されます。
IDセレクタ、クラスセレクタ、要素型セクレタがある場合
<style>
#t1 {
color: blue;
background-color: orange;
}
.t2 {
color: green;
background-color: SkyBlue;
}
p {
color: red;
background-color: yellow;
}
</style>
<p id="t1" class="t2">テスト1</p>
2行目は、IDセレクタ(#t1)です。
6行目は、クラスセレクタ(.t2)です。
10行目は、タイプセレクタ (要素型セレクタ)(P)です。
この中で詳細度が一番大きい(より特定される)IDセレクタの色が適用されます。
関連の記事