CSSで「◯番目の要素だけ色を変えたい」「奇数だけ背景を変えたい」といったことはよくあります。こうした細かな指定ができるセレクタをまとめて紹介します。すべて使用例つきで、初心者の方にも分かりやすく解説しています。

:nth-child() - ○番目を指定

兄弟要素の中で何番目かを選べます。特定の位置の見た目を変えたいときによく使います。例えば、3番目の要素だけ色を変えて注目させたいときに便利です。

li:nth-child(3) {
  color: red;
}

:nth-child(odd), :nth-child(even) - 奇数・偶数

交互の背景や色分けに便利です。リストや表の行を見やすくしたいときによく使います。行ごとに背景色を交互にすることで視認性を高められます。

li:nth-child(odd) {
  background: #f9f9f9;
}
li:nth-child(even) {
  background: #eee;
}

:nth-child(3n) - nの倍数

nの倍数にスタイルを当てたいときに使います。3カラムのグリッドで右端だけ装飾する場合などによく使います。

li:nth-child(3n) {
  font-weight: bold;
}

:nth-of-type() - タグごとにカウント

同じタグ名だけをカウントして番目を判定します。複数のタグが混在する中で特定のタグだけ順番を見たいときに便利です。リスト内に別のタグが挿入されている場合でもliの順番を正しく把握できます。

li:nth-of-type(2) {
  color: blue;
}

:first-child / :last-child - 最初・最後

最初や最後の要素にスタイルを当てたいときに使います。上下の余白調整や装飾などに便利です。たとえば、最初だけマージンを外したり、最後だけ下線を消したりしたいときに役立ちます。

li:first-child {
  margin-top: 0;
}
li:last-child {
  margin-bottom: 0;
}

:not(:first-child) - 2番目以降

先頭だけ除外して他の要素に一括でスタイルを当てたいときに便利です。リストの1個目だけ特別扱いし、それ以降に共通の装飾を与えるときに使います。

li:not(:first-child) {
  border-top: 1px solid #ccc;
}

:nth-last-child(X) - 最後からX番目

末尾から数えてX番目の要素を指定します。下から特定の位置にある要素を装飾したいときに使います。たとえば、最下部から2番目に注意書きを表示したい場合などに便利です。

li:nth-last-child(5) {
  color: orange;
}

:nth-last-of-type(X) - 特定タグの最後からX番目

同じタグの中で末尾から数えてX番目を指定します。タグが混在していても、liの中で下から何番目かを正確に狙いたいときに便利です。

li:nth-last-of-type(5) {
  background: #ffd;
}

:nth-child(n+X) - X番目から最後まで

X番目以降のすべてにスタイルを当てます。特定の区切りより後ろをまとめて装飾したいときに便利です。広告の後のコンテンツだけ装飾したいときなどに使います。

li:nth-child(n+5) {
  border: 1px solid #ccc;
}

:nth-of-type(n+X) - タグごとのX番目以降

同じタグだけを数えてX番目以降にスタイルを当てたいときに使います。繰り返しパーツで一定数以降の表示を変えたいときなどに便利です。

li:nth-of-type(n+5) {
  opacity: 0.8;
}

:nth-child(-n+X) - X番目まで

最初からX番目までを対象にします。上位だけ目立たせたいランキング表示などでよく使います。

li:nth-child(-n+5) {
  font-style: italic;
}

:nth-of-type(-n+X) - タグごとのX番目まで

同じタグだけに絞って、先頭のX個にスタイルを当てたいときに便利です。カテゴリリストやラベルなどで冒頭の要素に強調を加えたいときに使えます。

li:nth-of-type(-n+5) {
  font-weight: bold;
}

:nth-last-child(-n+X) - 最後からX個

末尾からX個の要素にまとめてスタイルを当てます。最新の投稿やログなど、終わりの方にある要素にスタイルをつけたいときに便利です。

li:nth-last-child(-n+5) {
  color: green;
}

:nth-last-of-type(-n+X) - タグごとの最後からX個

同じタグだけで末尾からX個分をまとめて装飾したいときに便利です。特定の要素の最後の数件だけを装飾するときに使います。

li:nth-last-of-type(-n+5) {
  background: #f0f0ff;
}

:nth-last-child(n+X) - 最後からX番目以前

末尾からX番目より前の要素を対象にします。古い情報や前の方の項目を区別して見せたいときに便利です。

li:nth-last-child(n+5) {
  text-decoration: underline;
}

:nth-last-of-type(n+X) - タグごとの最後からX番目以前

同じタグだけで末尾より前の要素に装飾したいときに使います。時間順に並んだ要素で、古いものだけ目立たせたいときに便利です。

li:nth-last-of-type(n+5) {
  background: #fff0f0;
}

属性セレクタ（^=、$=、*=） - 前方一致・後方一致・部分一致

クラス名などの一部が一致する要素を選びたいときに使います。クラス名の命名規則に基づいてまとめてスタイルを当てたいときに便利です。

[class^="btn-"] {
  padding: 1em;
}
[class$="-danger"] {
  color: red;
}
[class*="icon"] {
  display: inline-block;
}

まとめ

CSSセレクタは順番や文字列の一致条件で柔軟な選択が可能です。リストの装飾、グリッド調整、状態の分類など、さまざまなシチュエーションで活躍します。特定の目的に合わせて適切なセレクタを使いこなすことで、コードの見通しも良くなります。