CSS Nth Child：完全ガイド

CSS：nth-child（）セレクターは、グループ内の特定の位置にある要素にスタイルを適用します。多くの場合、：nth-child（）セレクターは、2番目または3番目ごとのアイテムなど、特定のリストアイテムのスタイルを設定するために使用されます。

ウェブサイトをデザインするときは、コンテナ内の選択した要素のセットにのみスタイルを適用することをお勧めします。たとえば、リストの2つおきの要素、またはテーブルの3つおきの行にのみスタイルを適用したい場合があります。

そこで、CSS：nth-child疑似クラスが登場します。：nth-child疑似クラスは、HTMLページのアイテムリスト内の位置に基づいて要素を照合します。

このチュートリアルでは、例を参照して、疑似クラスの基本と、：nth-child疑似クラスの使用方法について説明します。このチュートリアルを読み終えると、：nth-child疑似クラスを使用してWebページ上の要素を選択するエキスパートになります。

CSS疑似クラス

CSSでは、セレクターを使用して、スタイルを適用するWebページ上の特定の要素を選択します。たとえば、セレクターは、Webページ上のすべての

要素のテキストの色を緑色に変更できます。

特定の状態で存在する要素にのみスタイルを適用することを決定できます。疑似クラスを使用すると、要素が特定の状態にある場合にのみスタイルを適用できます。

CSS：n番目の子の疑似クラス

：nth-child疑似クラスは、グループ内の要素にスタイルを適用します。位置または複数の要素に基づいて、特定の要素にスタイルを適用できます。一般的な：n番目の子のルールは、リスト内の奇数または偶数の位置にあるすべての要素に色を付けることです。

：nth-child疑似クラスの構文は次のとおりです：

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

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

この例を分解してみましょう：

li スタイルを適用する要素を指します。
n番目の子 要素を照合するために使用されるセレクターです。
2 n番目の子を使用して要素を照合するために使用される式です。

この場合、リスト内の1つおきの

要素にスタイルを適用しました。

：n番目の子が受け入れる値

：nth-child疑似クラスは、2つのタイプの値を受け入れます。まず、疑似クラスは、デフォルトの式が割り当てられたキーワード値を受け入れます。これらのキーワードは次のとおりです。

odd：リスト内の位置が奇数である要素を選択します。
even：リスト内の位置が偶数である要素を選択します。

次に、：nth-child疑似クラスは、疑似クラスがWebページで選択する要素を指定するカスタム式を受け入れます。数式の例を次に示します。

：nth-child（6）：リストの6番目の要素を選択します。
：nth-child（n + 2）：2番目以降のすべての要素を選択します。
：nth-child（4n）：4の倍数であるすべての要素を選択します。

n アイテムがリストに表示される位置と同じです。

これで、：nth-child疑似クラスの基本がわかったので、動作中の疑似クラスのいくつかの例を調べることができます。

CSS：n番目の子の例

：n番目の子の疑似クラスの2つの例を見ていきましょう。

：n番目の子テーブル

：nth-child疑似クラスの一般的な使用法の1つは、テーブル内の行を選択することです。

地元の料理クラブのウェブサイトをデザインしているとします。クラブから、ウェブサイトのテーブルと、特別なスパイスの効いたホットチョコレートのレシピをまとめるように依頼されました。。クラブは、テーブルの2行ごとに、クラブのメインカラーであるホットピンクで強調表示されることを望んでいます。

次のコードを使用してこのテーブルを作成できます：

<html>

<table>
  <tr>
    <th>Ingredient</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Skimmed Milk</td>
    <td>250 mls</td>
  </tr>
  <tr>
    <td>75% Dark Chocolate</td>
    <td>Two squares (10g)</td>
  </tr>
  <tr>
    <td>Cinnamon</td>
    <td>A pinch</td>
  </tr>
  <tr>
    <td>Honey</td>
    <td>1 tsp</td>
  </tr>
</table>

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

CSS Nth Child：完全ガイド 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

2つの列と5つの行（そのうちの1つはヘッダー行）でテーブルを定義しました。最初の列には、スパイスの効いたホットチョコレートを作るために使用される材料のリストが格納されています。 2番目の列には、使用された各成分の量が格納されています。

HTMLでテーブルを作成する方法の詳細については、HTMLテーブルのガイドをご覧ください。

CSSファイルでは、：nth-child疑似クラスを使用して、テーブル内のすべての偶数行にスタイルを適用しました。

tr セレクターはすべてのテーブル行（HTMLではタグで示される）を選択するために使用され、：nth-child（even）疑似クラスは偶数のID番号を持つすべてのテーブル行を選択します。偶数のテーブル行ごとに、テーブル行の背景色がホットピンクに設定されます。

：n番目の子リスト

：nth-child疑似クラスのもう1つの一般的な使用法は、リスト内のアイテムを強調表示することです。

クッキングクラブの各メンバーの名前のリストをまとめるように依頼されたとします。リストの最初の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>