ywork2020.com

Title

兄弟要素の中でn番目の要素を検知する

目次 (INDEX)

:nth-childとは

ここで説明する:nth-child とは次の語句からなるCSSの疑似クラスです。
nth
読み: n番目
意味: n=自然数のこと。th=番目 (序数/ordinal)のこと。
child
読み: チャイルド
意味: 子、子供

目次に戻る

:nth-child疑似クラスの概要

この疑似クラスは(引数)に与えたキーワードや関数表記により、セレクタに該当する要素の兄弟要素グループからn番目の要素を検知して一時的なプロパティ値の変更を行います。

引数にoddキーワード値を与えると兄弟要素グループから奇数番目を検知し、引数にevenキーワード値を与えると兄弟要素グループから偶数番目を検知することができます。 また関数表記の指定方法によりn番目置きに検知するなどの指定もできます。

ひとつ、この疑似クラスを使う上での注意点を申し上げておきますと、 :nth-child疑似クラスでは要素セレクターやid、classなどのセレクターで設定したプロパティ値を上書きすることはできません。 このことは、このページのサンプルコードのセクションでも説明しています。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。

セレクター:nth-child(引数){プロパティ名: 設定値;}
:nth-child(引数){プロパティ名: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素に:nth-child疑似クラスを使ってプロパティ値の一時的な変更を見てみたいと思います。

目次に戻る

参考: 兄弟要素の中でn番目の要素を検知する

このサンプルではli要素を使って3項目のリストを作成しました。 :nth-childの引数に(2)を指定したことによって2番目の「List Item2」がプロパティ値の設定対象となっています。

「List Item0を追加のボタン」をクリックすると兄弟要素の先頭に「List Item0」が追加されますが、 結果は「List Item1」が2番目の要素になるのでプロパティの適用対象が変わったことが分ると思います。

  • List Item1
  • List Item2
  • List Item3

li:nth-child(2){
	background-color: ##aqua;
}

目次に戻る

引数: odd

引数にoddキーワードを指定すると兄弟要素の中で奇数番目の要素を検知してプロパティ値を適用します。

つまり兄弟要素の1,3,5,7,9...と続く数値番目の要素がプロパティ設定の対象となります。

<body>
	<table>
		<thead>
			<caption>サンプル</caption>
			<tr><th>表見出し</th><th>表見出し</th></tr>
		</thead>
		<tbody>
			<tr><td>データ</td><td>データ</td></tr>
			<tr><td>データ</td><td>データ</td></tr>
			<tr><td>データ</td><td>データ</td></tr>
			<tr><td>データ</td><td>データ</td></tr>
			<tr><td>データ</td><td>データ</td></tr>
			<tr><td>データ</td><td>データ</td></tr>
		</tbody>
		<tfoot>
			:nth-child - example
		</tfoot>
	</table>
</body>
:nth-child - example
サンプル
表見出し表見出し
データデータ
データデータ
データデータ
データデータ
データデータ
データデータ

<style>
	table{
		table-layout: fixed;
		border: thin solid currentColor;
		border-spacing: 0;
	}
	th{
		background-color: ##lightpink;
	}
	th, td{
		padding: 10px;
		border: thin solid currentColor;
	}
	tr:nth-child(odd){
		background-color: ##lightskyblue;
	}
</style>

:nth-childを使う上での注意点となりますが、ここではtr要素(行要素)に疑似クラスを使用しています。 oddキーワードを使うと奇数番目のtr要素の背景色がライトスカイブルーになるので、tbody要素内のtr要素は正常に処理されています。 しかし、thead要素の子要素のtr要素の背景色はライトピンクのままです。 もちろん、ここではそれが狙いでプロパティを設定しています。

このように:nth-child疑似クラスは他の要素セレクターやid、classなどのセレクターで設定されたプロパティの値を一時変更することができません。 このような場合、th要素のプロパティ設定をやめるか、th要素のプロパティ設定をinitialキーワードで初期化することを検討してください。

目次に戻る

引数: even

引数にevenキーワードを指定すると兄弟要素の中で偶数番目の要素を検知してプロパティ値を適用します。

つまり兄弟要素の2,4,6,8,10...と続く数値番目の要素がプロパティ設定の対象となります。

ここで使うサンプルは前セクションと同じ要素構成ですので、お手数ですが前セクションを参照してください。

:nth-child - example
サンプル
表見出し表見出し
データデータ
データデータ
データデータ
データデータ
データデータ
データデータ

<style>
	table{
		table-layout: fixed;
		border: thin solid currentColor;
		border-spacing: 0;
	}
	th{
		background-color: ##lightpink;
	}
	th, td{
		padding: 10px;
		border: thin solid currentColor;
	}
	tr:nth-child(even){
		background-color: ##lightskyblue;
	}
</style>

:nth-childを使う上での注意点となりますが、:nth-child疑似クラスは他の要素セレクターやid、classなどのセレクターで設定されたプロパティの値を一時変更することができません。 詳細は前セクションで説明していますのでご参照ください。

目次に戻る

引数: ?n

このサンプルではli要素を使って9項目のリストを作成しました。 :nth-childの引数に(3n)を指定したことによって3の倍数番目の要素がプロパティ値の設定対象となっています。

このように任意の数値nを引数にすることで数値の倍数番目にあたる要素がプロパティ値の設定対象となります。

  • List Item1
  • List Item2
  • List Item3
  • List Item4
  • List Item5
  • List Item6
  • List Item7
  • List Item8
  • List Item9

li:nth-child(3n){
	background-color: ##burlywood;
}

目次に戻る

引数: ?n+?

このサンプルではli要素を使って9項目のリストを作成しました。 :nth-childの引数に(2n+4)を指定したことによって4番目の要素を検知対象の初めとして2の倍数番目の要素がプロパティ値の設定対象となっています。

  • List Item1
  • List Item2
  • List Item3
  • List Item4
  • List Item5
  • List Item6
  • List Item7
  • List Item8
  • List Item9

li:nth-child(2n+4){
	background-color: ##violet;
}

目次に戻る

引数: n+?

このサンプルではli要素を使って9項目のリストを作成しました。 :nth-childの引数に(n+5)を指定したことによって5番目以降の要素がプロパティ値の設定対象となっています。

  • List Item1
  • List Item2
  • List Item3
  • List Item4
  • List Item5
  • List Item6
  • List Item7
  • List Item8
  • List Item9

li:nth-child(n+5){
	background-color: ##yellow;
}

目次に戻る

引数: -n+?

このサンプルではli要素を使って9項目のリストを作成しました。 :nth-childの引数に(-n+6)を指定したことによって6番目以前の要素がプロパティ値の設定対象となっています。

  • List Item1
  • List Item2
  • List Item3
  • List Item4
  • List Item5
  • List Item6
  • List Item7
  • List Item8
  • List Item9

li:nth-child(-n+6){
	background-color: ##green;
}

目次に戻る

応用: 2つの:nth-child疑似クラスを使う

このサンプルではli要素を使って9項目のリストを作成しました。 2つの:nth-childの引数に(n+3)と(-n+7)を指定したことによって3番目から7番目の要素がプロパティ値の設定対象となっています。

  • List Item1
  • List Item2
  • List Item3
  • List Item4
  • List Item5
  • List Item6
  • List Item7
  • List Item8
  • List Item9

li:nth-child(n+3):nth-child(-n+7){
	background-color: ##red;
}

目次に戻る