CSSでは:first-childや:first-of-type、:nth-childなどの擬似クラスを使って、要素の何番目・奇数偶数など細かくセレクタを指定することができます。
::afterや::first-letterなどは擬似要素といいます。
疑似クラスと疑似要素もいつもどっちがどっちだったかな……って迷います（笑）。
擬似クラスはとても便利なのですが覚えられなくて…
いつも使うたびに調べていて時間が掛かってしまってました。
ということで、よく使うセレクタのカンニングペーパーです！
「-child」と「-of-type」
まず-childと-of-typeで悩んでしまいます（笑）。
-childは兄弟要素の中で全種の要素が当てはまります。<p><li><div>などどんな要素も含まれます。-of-typeは兄弟要素の中で同じ種類の要素のみ当てはまります。<p>なら<p>のみ、classを指定したらそのclassのみを数えます。
今回のカンペでは、わかりやすいので-of-typeを使っていきます。
よく使う疑似クラス
最初と最後
:first-of-type
最初の要素
:last-of-type
最後の要素
一つのみ
:only-of-type
子要素がひとつのみ
否定
:not(除外するセレクタ)
「除外するセレクタ」で指定したセレクタ以外
奇数と偶数
:nth-of-type(odd)
奇数
:nth-of-type(2n+1)でも指定できます。
:nth-of-type(even)
偶数
:nth-of-type(2n)でも指定できます。
ちなみに、oddは3文字で奇数、evenは4文字で偶数と覚えると覚えやすいです。
最初/最後からX番目
:nth-of-type(X)
最初からX番目の要素
:nth-last-of-type(X)
最後からX番目の要素
X番目【:nth-】応用
「nth」って何の略なんだろうと思っていたら「n + th」（4th,5th…）で「n番目」ということらしい…という情報が。
実際にそういう意味なのかはわからないのですが、覚えやすかったのでそれで覚えてます。
:nth-of-type(Xn)
Xの倍数
:nth-of-type(3n)
→3・6・9・・・
:nth-of-type(n+X)
X番目以降（X番目～最後）
:nth-of-type(n+5)
→0+5=5、1+5=6、2+5=7・・・
:nth-child(-n+X)
X番目以前（最初～X番目）
:nth-child(-n+5)
→-0+5=5、-1+5=4・・・-4+5=1（最初）
最後から【:nth-last-】
上のnthとは逆順
（n=0が一番最後で、後ろから数える）
:nth-last-of-type(n+X)
最後からX番目以前
:nth-last-of-type(-n+X)
最後からX番目まで
