実践でよく使う擬似要素などのセレクタまとめ

1、隣接セレクタ(E + F)

要素と要素が直接隣接している場合に適応されます。

隣接セレクタE

2、子セレクタ (E > F)

親要素の直接の子要素に適用されます。

3、間接セレクタ (E ~ F)

親要素が同じになる兄弟関係の弟に適用されるセレクタです。

ここは赤くならない

間接セレクタE

ここは赤くなる

4、:first-child, :last-child, :only-child

要素内の最初（最後・ひとつ）に書かれている子要素にスタイルが適用されます。

:first-childの場合

:last-childの場合

:only-childの場合

5、:first-of-type, :last-of-type, :only-of-type

要素の同じ子要素の最初（最後・ひとつ）の要素にスタイルを適用します。

:first-of-typeの場合

:last-of-typeの場合

:only-of-typeの場合

6、:nth-child(odd)

要素内の最初（最後・ひとつ）に書かれている子要素にスタイルが適用されます。

7、:nth-of-type(odd)

要素の同じ子要素の奇数番目の要素に適用します。

8、:nth-child(even)

要素の隣接している子要素の偶数番目の要素に適用します。

9、:nth-of-type(even)

要素の同じ子要素の偶数番目の要素に適用します。

10、:nth-child(3)

要素の隣接している子要素のn番目の要素に適用します。

11、:nth-of-type(3)

要素の同じ子要素のn番目の要素に適用します。

12、:nth-child(n+3)

要素の隣接している子要素の3番目以降の要素に適用します。

13、:nth-of-type(n+3)

要素の同じ子要素の3番目以降の要素に適用します。。

14、:nth-child(-n+3)

要素の隣接している子要素の上から3番目までの要素に適用します。

15、:nth-of-type(-n+3)

要素の同じ子要素の上から3番目までの要素に適用します。

16、:nth-last-child(3)

要素の隣接している子要素の下からn番目の要素に適用します。

17、:nth-last-of-type(3)

要素の同じ子要素の下からn番目の要素に適用します。

18、:nth-last-child(n+3)

要素の隣接している子要素の下から3番目以前の要素に適用します。

19、:nth-last-of-type(n+3)

要素の同じ子要素の下から3番目以前の要素に適用します。

20、:nth-last-child(-n+3)

要素の隣接している子要素の下から3番目までの要素に適用します。

21、:nth-last-of-type(-n+3)

要素の同じ子要素の下から3番目までの要素に適用します。

22、:not(:last-child)

要素の隣接している子要素の最後以外の要素に適用します。

23、:not(:last-of-type)

要素の同じ子要素の最後以外の要素に適用します。