CSS基礎 セレクタの指定方法と優先順位

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

こんにちは、kikuokaです。今回のtipsは【CSS基礎 セレクタの指定方法と優先順位】に関してです。cssでスタイルを適用する際に使用するセレクタは、指定法や優先順位など効率的で効果的な指定方法があったりと以外と奥深い基礎です。今回はセレクタの効率的な指定方法など基礎をまとめてみました。

セレクタの基本

serecter_img
赤で表記してある部分がセレクタです。

1つ以上のセレクタの指定方法

区切り方 概要
カンマ[ , ] h1,p h1とpどちらにも適用
スペース [ ] h1 p h1の中のp要素に適用
不等号[ > ] #id>p #id直下のp要素に適用
プラス[ + ] #id+p #idに隣接している要素に適用
何もなし #id.class #id要素のうちclassだけ適用
[要素]:first-child #id:first-child #id要素のうち最後の子要素に適用
[要素]:last-child #id:last-child #id要素のうち最初の子要素に適用
[要素]:nth-child(数字) #id:nth-child(2) #id要素のうち括弧内の奇数番目の要素に適用
[要素]:nth-child(odd) #id:nth-child(odd) #id要素のうち括弧内の数字番目の要素に適用
[要素]:nth-child(even) #id:nth-child(even) #id要素のうち括弧内の偶数番目の要素に適用
[要素]:nth-child(数字n) #id:nth-child(3n) #id要素のうち3の倍数(4倍も可)にある要素に適用
[要素]:nth-child(数式) #id:nth-child(3n+1) #id要素のうちかっこの数式にあてはまる要素に適用
[要素]:not(要素) #id:not(last-child) #id要素中の括弧内で指定した要素・セレクタ以外に適用
かっこ[要素^=”要素名”] p[class^=”sec”] p要素に対してクラス名がsecで始まるものに適用

この他にもたくさん便利なセレクタがありますが、使用頻度の高そうなものを選びました。
※一部IE以下では適応されないものも含まれていますのでご注意ください。

セレクタの優先順位

優先されるセレクタ

●後から書いたセレクタ
●詳細に指定したセレクタ
●classよりidが優先
●プロパティの後に[!important]と書いたもの

また、優先順位は、優先ポイントの合計が高いものが最優先されます。
優先ポイントの高い順にリストにしました。

優先ポイント 概要
100ポイント ID要素
10ポイント class要素
1ポイント [h1,p]など、複数のセレクタを詳細に指定した要素
0ポイント 全称セレクタ[ * ]

以上になります。

引用元:Kana-Lier カナリエ
    Webpark
    http://www.stylish-style.com/