今回は:nth-child() や :nth-of-type() より細かい指定ができる:nth-child() の “of S” 構文を使う方法をお伝え致します。
まずは、: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()でリストの三番目の要素だけテキストの色を変更したい場合
<ul>
<li>リストアイテム1</li>
<li>リストアイテム2</li>
<li>リストアイテム3</li> <!-- このアイテムの色を変える -->
<li>リストアイテム4</li>
<li>リストアイテム5</li>
</ul>
/* 3番目のリストアイテムのテキスト色を青に変更 */
li:nth-child(3) {/* nth-child()の()に指定したい箇所が何番目かを書く(順番のルールを記載)*/
color: blue;
}
このように、:nth-child()を使えば、クラス名が無くても親要素に囲まれた特定の子要素にスタイルをあてる事ができます。
では、今度は:nth-child()の「of S」構文とは何かを説明します。
:nth-child()の「of S」構文(nth-child(An+B of S))は、特定の種類の要素(タグやクラス)に限定して順番を数え、スタイルを適用するためのCSSの方法です。この構文を使うと、親要素の中で「特定のタグやクラス」にのみ順番をカウントして、ピンポイントでスタイルを当てることができます。
:nth-child(An+B(何番目の要素にスタイルを適用するかを指定 ) of S(スタイルを適用する要素の種類 を指定(タグやクラスなど)))
次回、:nth-child() の “of S” 構文で、細かく要素を指定する方法②でどのように表示されるかを試していきます。
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。