多数ある同じHTML要素のもののうち、クラスを指定せずに特定の要素を指定できる疑似クラス。
とても便利で使い勝手がいいですが、ちゃんと特定しないと意図しないところを指定してしまったりするので、間違えないために表にまとめてみました。
| セレクタ | 意味 |
| E:first-child | 最初の子であるE要素 |
| E:last-child | 最後の子であるE要素 |
| E:nth-child(n) | n番目の子であるE要素 |
| E:nth-last-child(n) | 後ろからn番目の子であるE要素 |
| E:only-child | 唯一の子であるE要素 |
| E:first-of-type | 最初のE要素 |
| E:last-of-type | 最後のE要素 |
| E:nth-of-type(n) | n番目のＥ要素 |
| E:nth-last-of-type(n) | 後ろからn番目のE要素 |
| E:only-of-type | 唯一のE要素 |
”n”に指定できる値
通常の数値以外にも、こんな値が指定できます。
| odd | 奇数の要素 |
| even | 偶数の要素 |
| 3n | 3の倍数（3,6,9…）番目の要素 |
| 3n+1 | 1,4,7,10…番目（3飛び）の要素 |
| :nth-child(n+2) | 前から2番目以降の要素 |
| :nth-child(-n+2) | 最初の要素から2番目までの要素 |
| :nth-last-child(-n+2) | 最後から2番目までを後ろから選択 |
| :not(:nth-child(2)) | 2番目以外を選択 |
組み合わせて使うこともできる
| :not(:nth-child(2)):nth-child(even) | 2番目以外で かつ 偶数番目（4,6,8,10…）の要素 |
| :nth-child(-n+4):nth-last-child(-n+2) | 前から4番目以降で かつ 後ろから2番目までの要素 |
| :nth-child(n+5):nth-child(-n+8) | 前から5番目から8番目までの要素 |
組み合わせるときはAND条件となります。
