CSS3の便利なセレクタ

CSS3のセレクタには便利なものがたくさんありますが、色々ありすぎてつい忘れがちなので、ここで改めてメモしておきます。

1. 直下の要素

div > p

div要素の直下のp要素。

2. 直後の要素

div + p

div要素の直後にあるp要素。

3. 以降の要素

div ~ p

div要素以降にあるp要素すべて。

4. 最初の行

div :first-line

div要素の下の最初の行。

5. 最初の要素

div :first-child

div要素の下の最初の要素。

6. 偶数番目の要素

li:nth-of-type(2n)

li要素の偶数番目の要素。

7. 奇数番目の要素

li:nth-of-type(2n+1)

li要素の奇数番目の要素。

8. NOT要素

div :not(p)

div要素の下のp要素ではない要素。

9. チェックされた要素

input[type=radio]:checked + label

チェックされたラジオボタンの直後のlabel要素。

10. 特定の属性値を持つ要素

div[data-url="http://hoge.com"]

data-url属性が"http://hoge.com"なdiv要素。

以上。
他にもありますが、私が忘れやすかった＋便利だと思ったものだけをピックアップしてみました。