セレクタの指定方法と優先順位
区切り方 | 例 | 概要 |
カンマ[ , ] | 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で始まるものに適用 |