CSSの:nth-childは、親要素内で特定の順序にある要素を選択するための非常に便利な擬似クラスです。この記事では、基本的な使い方から応用例まで、丁寧に解説していきたいと思います。

使用するHTMLのベースコード

まずは、この記事で使用する基本のHTMLコードです。

<div class="container">
  <div class="block">ブロック1</div>
  <div class="block">ブロック2</div>
  <div class="block">ブロック3</div>
  <div class="block">ブロック4</div>
  <div class="block">ブロック5</div>
  <div class="block">ブロック6</div>
  <div class="block">ブロック7</div>
  <div class="block">ブロック8</div>
  <div class="block">ブロック9</div>
  <div class="block">ブロック10</div>
</div>

このHTMLを基に:nth-childセレクターの実例を見ていきましょう。

n番目の要素を選択する

特定の1つの要素を選択するには、番号をそのまま指定します。
例えば、3番目の要素にのみスタイルを適用したい場合は、次のように書きます。

.block:nth-child(3) {
  background-color: #BDE038;
}

このように、特定の位置にある要素だけを簡単に選択できます。

奇数・偶数の要素を選択する

奇数の要素を選択する

親要素内で奇数番目にある要素をすべて選択したい場合は、「odd」というキーワードを使用します。これにより、1番目、3番目、5番目…と続く要素にスタイルが適用されます。

.block:nth-child(odd) {
  background-color: #BDE038;
}

また、同じ結果を得るための数学的表現として「2n-1」という記述も可能です。
これは2で割ると余りが1になる数、つまり奇数を表しています。

.block:nth-child(2n-1) {
  background-color: #BDE038;
}

偶数の要素を選択する

同様に、偶数番目の要素を選択する場合は「even」というキーワードを使います。これにより、2番目、4番目、6番目…の要素が選択されます。

.block:nth-child(even) {
  background-color: #BDE038;
}

こちらも数学的表現として「2n」と書くことができます。2の倍数、つまり偶数を意味しています。

.block:nth-child(2n) {
  background-color: #BDE038;
}

こんかい

私は2nの方を良く使っています！

特定の間隔で要素を選択する

3つおきに要素を選択する

例えば、1番目、4番目、7番目…というように、3つおきに要素を選択したい場合は、次のように指定します。

.block:nth-child(3n+1) {
  background-color: #BDE038;
}

この「3n+1」という式では、nには0から始まる整数が順に代入されます。n=0のとき3×0+1=1、n=1のとき3×1+1=4、n=2のとき3×2+1=7…となり、結果として1、4、7…番目の要素が選択されるのです。

2番目から開始して3つおきに選択する

開始位置を変えたい場合は、足し算の部分を調整します。例えば、2番目、5番目、8番目…と選択したい場合は次のようにします。

.block:nth-child(3n+2) {
  background-color: #BDE038;
}

nに0を代入すると3×0+2=2、nに1を代入すると3×1+2=5というように計算され、望みの間隔で要素を選択できます。

範囲指定で要素を選択する

2番目から5番目までを選択する

特定の範囲の要素だけを選択したい場合は、複数の条件を組み合わせることができます。

.block:nth-child(n+2):nth-child(-n+5) {
  background-color: #BDE038;
}

この例では、「n+2」で2番目以降のすべての要素を選択し、それに「-n+5」という条件を追加して5番目までに制限しています。「n+2」はnに0以上の整数を代入すると、2、3、4…となり、2番目以降のすべての要素を指します。一方、「-n+5」はnに0を代入すると5、nに1を代入すると4…と計算され、5番目以前の要素を表します。この2つの条件を組み合わせることで、2番目から5番目までの要素だけを選択できるのです。

末尾から一定間隔で選択する

最後から2つおきに選択する

:nth-childには:nth-last-childという姉妹セレクターがあります。これは末尾からの順序で要素を評価します。

.block:nth-last-child(2n) {
  background-color: #BDE038;
}

この例では、末尾から数えて偶数番目の要素が選択されます。10個の要素がある場合、末尾から2番目、4番目、6番目…つまり、先頭から数えると9番目、7番目、5番目…の要素が選択されます。

最後の2つだけを選択する

末尾の特定数の要素だけを選択したい場合も、:nth-last-childが便利です。

.block:nth-last-child(-n+2) {
  background-color: #BDE038;
}

「-n+2」という式で、末尾の2つの要素だけが選択されます。nに0を代入すると2、nに1を代入すると1となり、末尾から1番目と2番目の要素を指定できます。

特定の種類の要素を選択する

同じ種類のタグの3つ目だけを選択する

:nth-of-typeというセレクターは、同じ種類のタグごとに順序を数えます。異なる種類の要素が混在している場合に便利です。

p:nth-of-type(3) {
  background-color: #BDE038;
}

この例では、親要素内の3番目の<p>タグだけが選択されます。例えば、親要素内に他のタグが混ざっていても、<p>タグだけで3番目を数えてくれるのです。

同じ種類のタグの奇数番目を選択する

:nth-of-typeは、oddやevenといったキーワードも使えます。

p:nth-of-type(odd) {
  background-color: #BDE038;
}

この例では、<p>タグの中で奇数番目にあるものだけが選択されます。他の種類のタグは計算に入れず、<p>タグだけで1番目、3番目、5番目…と数えていきます。

要素を複数条件で選択する

1番目と4番目だけを選択する

複数の要素を個別に指定したい場合は、カンマで区切ってセレクターを並べることができます。

.block:nth-child(1),
.block:nth-child(4) {
  background-color: #BDE038;
}

この方法で、特定の位置にある要素を個別に選択できます。1番目と4番目だけに同じスタイルを適用したい場合などに便利です。

複数のセレクターを組み合わせる

4つ目以降かつ偶数番目を選択する

複数の条件を論理積（AND）として組み合わせることもできます。

.block:nth-child(n+4):nth-child(even) {
  background-color: #BDE038;
}

この例では、4番目以降の要素のうち、偶数番目のものだけが選択されます。つまり、4番目、6番目、8番目…といった要素にスタイルが適用されるのです。

先頭や末尾の特定の範囲を選択する

最初の2つを選択する

先頭から数えて特定の数の要素だけを選択する方法もあります。

.block:nth-child(-n+2) {
  background-color: #BDE038;
}

「-n+2」という式では、nに0を代入すると2、nに1を代入すると1となり、1番目と2番目の要素が選択されます。

最後の3つを選択する

同様に、末尾から数えて特定の数の要素も選択できます。

.block:nth-last-child(-n+3) {
  background-color: #BDE038;
}

この例では、末尾から3つの要素が選択されます。10個の要素がある場合、8番目、9番目、10番目の要素にスタイルが適用されます。

中央の要素を選択する

要素数が5つの場合、中央（3番目）だけを選択する

要素の数が固定されている場合、中央の要素を直接指定できます。

.block:nth-child(3) {
  background-color: #BDE038;
}

要素数が可変でも対応できるようにする

要素の数が変わる可能性がある場合は、中央付近の要素を範囲で指定することも考えられます。

.block:nth-child(n+2):nth-child(-n+4) {
  background-color: #BDE038;
}

この例では、2番目から4番目までの要素が選択されます。要素の総数によっては完全な中央にならないこともありますが、中央付近の要素を動的に選択するための一つの方法です。

ネストした要素での利用

親ごとに異なるスタイルを適用する

:nth-childは、ネストした要素にも適用できます。

.container:nth-child(odd) .block {
  background-color: #BDE038;
}

この例では、.containerのうち奇数番目にあるものの中にある.blockすべてに、指定したスタイルが適用されます。親要素の位置に基づいて子要素のスタイルを変更したい場合に便利です。

フィルタリングの代替として利用

2番目以降、偶数だけスタイルを適用する

複数の条件を組み合わせることで、複雑なフィルタリングも可能です。

.block:nth-child(n+2):nth-child(even) {
  background-color: #BDE038;
}

この例では、2番目以降の要素のうち、偶数番目（つまり2番目、4番目、6番目…）だけが選択されます。

:nth-of-typeを使う

同じ種類のタグに対して順序を指定したい場合、:nth-of-typeが便利です。特に、異なる種類のタグが混在している場合に役立ちます。

使用するHTML

<div class="container">
  <p class="block">段落1</p>
  <p class="block">段落2</p>
  <div class="block">ブロック1</div>
  <p class="block">段落3</p>
</div>

例: 2番目の段落を選択する

p:nth-of-type(2) {
  background-color: #BDE038;
}

この例では、<p>タグの中で2番目のものだけが選択されます。上記のHTMLでは「段落2」が該当します。異なる種類のタグである<div>は、計算に含まれません。

:hasと:nth-childの組み合わせ

:hasセレクターを使うと、特定の子要素を持つ親要素を選択できます。これにより、子要素の状態に基づいて親要素のスタイルを変更することが可能になります。

使用するHTML

<div class="container">
  <div class="block">
    <span>対象外</span>
  </div>
  <div class="block">
    <span>対象</span>
  </div>
</div>

CSS例

.container:has(.block:nth-child(2)) {
  border: 2px solid #BDE038;
}

この例では、2番目の.block要素を持つ.containerにスタイルが適用されます。これにより、子要素の位置に基づいて親要素の見た目を変更するといった柔軟な表現が可能になります。

:notを使う

:notセレクターを使うと、特定の条件に該当しない要素を選択できます。

1番目以外の要素を選択する

.block:not(:nth-child(1)) {
  background-color: #BDE038;
}

この例では、1番目の要素を除くすべての.block要素にスタイルが適用されます。特定の位置にある要素だけを除外したい場合に便利です。

:first-childと:last-child

最初と最後の子要素には、専用のセレクターが用意されています。

最初の要素と最後の要素にスタイルを適用する

.block:first-child {
  border: 2px solid #BDE038;
}

.block:last-child {
  border: 2px dashed #BDE038;
}

:first-childは最初の子要素、:last-childは最後の子要素を選択します。:nth-child(1)や:nth-last-child(1)と同じ働きをしますが、より直感的に書けるため、単純な場合はこちらを使うとコードが読みやすくなります。

まとめ

CSSの:nth-childとその関連セレクターを活用すれば、JavaScriptを使わなくても、複雑な条件に基づいて要素を選択し、スタイルを適用することができます。さまざまなパターンを組み合わせることで、より柔軟で効率的なスタイリングが可能になるので、ぜひ実際のプロジェクトで活用してみてください。