CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:nth-childセレクター完全ガイド｜基本構文から実用例まで徹底解説

CSSの:nth-child()セレクターは、グループ内の特定の位置にある要素に対してスタイルを適用するための擬似クラスです。リストの2番目ごと、3番目ごとの項目など、特定の要素だけをスタイリングしたい場面でよく使われます。

Webサイトをデザインしていると、コンテナ内の一部の要素にだけスタイルを適用したいことがあります。たとえば、「リストの偶数番目の要素だけ」「表の3行ごと」に色を付けたいといったケースです。

そんなときに役立つのが、CSSの:nth-child擬似クラスです。この擬似クラスを使うと、HTMLページ上の要素の並び順（位置）に基づいて要素をマッチさせることができます。

本記事では、擬似クラスの基礎から:nth-childの具体的な使い方まで、実例を交えながらわかりやすく解説します。読み終える頃には、プロのWeb開発者のように:nth-childを使いこなせるようになっているでしょう。

CSSの擬似クラスとは

CSSでは、セレクターを使ってWebページ上の特定の要素を選択し、そこにスタイルを適用します。たとえば、ページ内のすべての<p>要素の文字色を緑に変更する、といった指定が可能です。

しかし、「特定の状態にある要素にだけスタイルを適用したい」というケースもよくあります。擬似クラスを使えば、要素が特定の状態や条件を満たす場合にのみスタイルを適用できます。

:nth-child擬似クラスの基本

:nth-child擬似クラスは、グループ内の要素に対してスタイルを適用します。位置を指定して1つの要素に適用することも、複数の要素にまとめて適用することも可能です。よく使われるルールのひとつが、「奇数番目・偶数番目の要素に交互に色を付ける」というものです。

基本的な構文は以下のとおりです。

li:nth-child(2) {
	color: lightblue;
}

このコードの構成要素を分解してみましょう。

  • li：スタイルを適用する対象の要素
  • nth-child：要素をマッチさせるために使う擬似クラス
  • 2：どの位置の要素を選択するかを指定する値

この例では、リスト内の2番目の<li>要素にスタイルが適用されます。

:nth-childで指定できる値

:nth-child擬似クラスには、大きく分けて2種類の値を指定できます。

1つ目は、あらかじめ定義されたキーワードです。

  • odd：リスト内で奇数の位置にある要素を選択
  • even：リスト内で偶数の位置にある要素を選択

2つ目は、選択したい要素を数式で指定する方法です。主な書式の例は以下のとおりです。

  • :nth-child(6)：6番目の要素を選択
  • :nth-child(n+2)：2番目以降のすべての要素を選択
  • :nth-child(4n)：4の倍数の位置にあるすべての要素を選択

ここでnは、リスト内での要素の位置（0から始まる整数）を表します。

それでは、:nth-childの具体的な使用例を見ていきましょう。

:nth-childの実用例

例1：表の行に交互の背景色を付ける

:nth-childの代表的な使い方のひとつが、表（テーブル）の行を選択してストライプ模様を作ることです。

ここでは、地域の料理クラブのWebサイトを制作する場面を想定します。クラブから依頼されたのは、看板メニューである「スパイス入りホットチョコレート」のレシピを掲載する表の作成です。クラブのテーマカラーであるホットピンクで、偶数番目の行をハイライト表示したいとのことです。

この表は次のコードで実装できます。

<html>

<table>
  <tr>
    <th>材料</th>
    <th>分量</th>
  </tr>
  <tr>
    <td>無脂肪牛乳</td>
    <td>250ml</td>
  </tr>
  <tr>
    <td>カカオ75%のダークチョコレート</td>
    <td>2マス（10g）</td>
  </tr>
  <tr>
    <td>シナモン</td>
    <td>ひとつまみ</td>
  </tr>
  <tr>
    <td>はちみつ</td>
    <td>小さじ1</td>
  </tr>
</table>

<style>
  tr:nth-child(even) {
      background-color: hotpink;
  }
</style>

このコードでは、2列5行（1行目は見出し行）の表を定義しています。1列目にはホットチョコレートに使う材料名、2列目にはそれぞれの分量を格納しています。

CSS側では、:nth-child擬似クラスを使って、表の偶数番目の行にスタイルを適用しました。trセレクターですべての表の行（HTMLの<tr>タグ）を選択し、:nth-child(even)によって偶数番目の行だけを絞り込んでいます。その結果、偶数番目の行の背景色がホットピンクに設定されます。

例2：リストの先頭3項目をハイライトする

もうひとつのよくある用途が、リスト内の特定の項目を強調表示することです。

今度は、料理クラブの会員名簿を作成する場面を想定しましょう。役職を持つ最初の3名については、文字色を水色にして他のメンバーと区別できるようにしたいという依頼です。

このリストは次のコードで作成できます。

<html>

<ul>
	<li>Chad Bakersfield</li>
	<li>Laura Patel</li>
	<li>Eddie Mahoney</li>
	<li>Edna Jamieson</li>
	<li>Lesley Spencer</li>
	<li>James Moffat</li>
	<li>Olivia Lindsay</li>
</ul>

<style>
  li:nth-child(-n+3) {
      color: lightblue;
  }
</style>

<ul>タグで順序なしリストを定義し、<li>タグで7人の名前を追加しています。

CSSでは、:nth-childセレクターを使ってリストの最初の3つの<li>要素を選択しました。具体的には-n+3という数式を使用しており、これにより「先頭から3番目まで」の要素だけがマッチします。そして、選択された要素の文字色が水色（lightblue）に変更されます。

まとめ

:nth-childセレクターを使うと、グループ内での位置に基づいて要素を選択し、CSSスタイルを柔軟に適用できます。

本記事では、CSS擬似クラスの基礎と:nth-child擬似クラスの使い方を、表とリストの2つの実例とともに解説しました。odd／evenキーワードや数式による指定を組み合わせれば、複雑なデザインも簡単に実現できます。これであなたも、プロのWeb開発者のように:nth-childを使いこなす準備が整いました！

CSSについてさらに学びたい方は、学習ロードマップやおすすめの学習リソースをまとめたガイドもぜひ参考にしてください。効率よくスキルアップするためのコツを紹介しています。

  1. HTMLとCSSの初心者向けガイド

    今日、私たちのサイトを支えているさまざまなテクノロジーを見つけることができますが、インターネット全体で最も重要な2つのファイルはHTMLとCSSです。はい、複雑なものが必要な場合は、それに対応するためのテクノロジーもさらに必要になります。ただし、単純な個人用Webページを作成するだけの場合は、HTMLとCSSだけで十分です。 基本の紹介 これは、HTMLとCSSの初心者向けガイドであり、簡単なサイトをできるだけ早く作成する方法を示しています。結果は必ずしも「標準に準拠」しているとは限りません。さらに微調整して拡張したい場合は、自分で読む必要があります。ただし、これはサイトであり、ほとんどのブ

  2. Todoistフィルター完全ガイド｜タスク管理を効率化する基本から応用まで

    すでにTodoistで日々のタスクを管理しているなら、「もっと便利に活用できないか」と感じたことはありませんか？その答えがTodoistフィルターです。フィルターを使えば、膨れ上がったタスクリストの中から必要なものだけを素早く取り出し、業務を大幅に効率化できます。特に、やるべきことが多すぎて何から手をつければいいかわからない状態に陥ったときこそ、フィルターの真価が発揮されます。Todoistにはあらかじめ用意された標準フィルターがあり、さらに自分好みのカスタムフィルターを作ることも可能です。本記事では、基本から応用まで詳しく解説します。 Todoistフィルターとは？ Todoistには