今回は、:nth-child() や :nth-of-type() より細かい指定ができる:nth-child() の “of S” 構文を使う方法を紹介します。

:nth-child()とは

まずは、:nth-child() の “of S” 構文の前に、:nth-child() は何かを簡単に説明します。

:nth-child(An+B)はCSSの擬似クラスで、特定の要素が親要素内で何番目に位置するかに応じてスタイルを適用するために使用されます。

特定の順番やパターン（偶数、奇数など）に従ってスタイルを適用できるため、リストアイテムやテーブルの行など、連続した要素に異なるデザインを適用したい場合に便利です。

※:nth-child(An+B)の［An+B］ は、CSSの :nth-child() や :nth-of-type() で使う「何番目の要素にスタイルをつけるか」を決める数式のルールです。この数式を使うと、順番に並んだ要素に対して偶数番目、奇数番目、3番目から始まる特定の間隔の要素など、自由に選択してスタイルを当てられます。

「3番目の子要素だけ」という一定の位置だけを指定する際には、［:nth-child(3)］のような指定もできます。今回、［An+B］の詳しい内容は割愛します。

例:nth-child()でリストの三番目の要素だけテキストの色を変更したい場合

HTML

<ul>

  <li>リストアイテム1</li>

  <li>リストアイテム2</li>

  <li>リストアイテム3</li> <!-- このアイテムの色を変える -->

  <li>リストアイテム4</li>

  <li>リストアイテム5</li>

</ul>

CSS

/* 3番目のリストアイテムのテキスト色を青に変更 */
li:nth-child(3) {/* nth-child()の()に指定したい箇所が何番目かを書く(順番のルールを記載)*/
color: blue;
}

このように、:nth-child()を使えばクラス名がなくても親要素に囲まれた特定の子要素にスタイルを当てることができます。

:nth-child()の「of S」構文とは

今度は、:nth-child()の「of S」構文とは何かを説明します。

:nth-child()の「of S」構文（nth-child(An+B of S)）は、特定の種類の要素（タグやクラス）に限定して順番を数え、スタイルを適用するためのCSSの方法です。

この構文を使うと、親要素の中で「特定のタグやクラス」にのみ順番をカウントしてピンポイントでスタイルを当てることができます。

:nth-child()の「of S」構文の書き方

:nth-child(Ａn+Ｂ(何番目の要素にスタイルを適用するかを指定 )　of  S(スタイルを適用する要素の種類 を指定（タグやクラスなど）))

:nth-child()と:nth-child()の「of S」構文の違い

• :nth-child()…親要素のすべての子要素を順番に数えて、特定の順番にある要素をターゲットにします。
• 「of S」構文…指定した特定の種類の要素の順番だけを数えることができます。An+Bの部分が適用される範囲を特定のタグやクラスに限定することで、他の要素の順番に影響を受けずにスタイルを適用することが可能です。

実際の利用シーン

• :nth-child() …リストの奇数・偶数行に背景色を付けるなど、順番だけに基づくスタイリングに便利です。
• 「of S」構文 …複数の異なる要素が混在する場合でも、特定のタグやクラスを持つ要素にだけ順番に応じたスタイルを適用したい場合に有効です。

次回は、「:nth-child() の “of S” 構文で、細かく要素を指定する方法②」でどのように表示されるかを試していきます。