CSSセレクタの種類と適用優先順位、指定方法等
CSSのセレクタの適用優先順位をまとめてみました。
あとセレクタの指定方法もあやふやになる事があるのでついでに。
セレクタの種類
- IDセレクタ : #idの様なid単位のセレクタ
- クラスセレクタ : .style1の様な各要素のclass単位のセレクタ
- 属性セレクタ : [title="test"]の様な要素の属性単位のセレクタ
- 疑似セレクタ : li:first-childの様な疑似セレクタ
- タイプセレクタ : pやdivの様な要素単位のセレクタ
セレクタ以外
-
!important
id指定等はもちろん事、インライン指定よりも優先される。
とにかく最優先する場合に有効。
どうしても対象スタイルを適用したい場合には有効だが使いすぎると
修正する時に辛い。p {color:blue !important;}
-
インライン指定
!importantを除いて一番優先される。
<p style="color:red;">test</p>
各セレクタ+αのスタイル適用優先順位
1. !important
2. インライン指定
3. IDセレクタ
4. クラスセレクタ/属性セレクタ/疑似セレクタ
5. タイプセレクタ
6. より後ろに書かれているスタイル
CSSのポイントの話
各セレクタでの指定には以下のような配分で点数が割り振られていると考えられる
- インライン : 1000pt
- id : 100pt
- クラス/疑似/属性 : 10pt
- タイプ :1pt
なので以下のようなケースの場合上の行のスタイルが適用され、redになる
.c1.c2.c3.c4{color:red} /* クラス×4=40pt */
.c1.c2{color:blue} /* クラス×2=20pt */
ただしあくまでセレクタタイプが同レベルの場合の判断基準のようなので
#id1{color:red;}
.c1.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11{color:blue}
みたいな(普通ありえないだろうけど)指定をしたからといって
上述した各セレクタの力関係は変わりませんのでこの場合はredになる
(IDセレクタ > クラスセレクタ)
CSSセレクタの指定方法
-
カンマ区切り
同じスタイルを複数の要素に適用する
.style1, style2
-
スペース区切り
.style1の中のp要素に適用する
.style1 p
-
>(不等号)
p要素の直下の.styleに適用する
p>.style1
-
.(ドット)でつなげる
.style1かつ.style2に適用する
.style1.style2
他にも色々あるけど、最低限この辺押さえておけばとりあえずやっていけるかな。