CSS基礎 セレクタの指定方法と優先順位
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
こんにちは、kikuokaです。今回のtipsは【CSS基礎 セレクタの指定方法と優先順位】に関してです。cssでスタイルを適用する際に使用するセレクタは、指定法や優先順位など効率的で効果的な指定方法があったりと以外と奥深い基礎です。今回はセレクタの効率的な指定方法など基礎をまとめてみました。
セレクタの基本
赤で表記してある部分がセレクタです。
１つ以上のセレクタの指定方法
| 区切り方 | 例 | 概要 |
| カンマ[ , ] | 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ポイント | 全称セレクタ[ * ] |
以上になります。