CSS: :nth-last-child (nthラストチャイルド) の解説 | 独学 Webプログラミング!

:nth-last-childとは

nth: 読み: n番目
意味: n=自然数のこと。th=番目 (序数/ordinal)のこと。
last: 読み: ラスト
意味: 最後の、最近の
child: 読み: チャイルド
意味: 子、子供

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

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

ただし、最後からn番目にセレクターに該当する要素が無い場合は検知されませんので同じ要素だけで構成されている場合に、この疑似クラスを使うことが多いでしょう。

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

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

結論を言うと、この疑似クラスは「最後から数える」という動作以外は :nth-child と変わりません。

目次に戻る

構文

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

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

目次に戻る

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

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

目次に戻る

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

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

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

List Item1 List Item2 List Item3

li:nth-last-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-last-child - example
		</tfoot>
	</table>
</body>

:nth-last-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-last-child(odd){
		background-color: ##lightskyblue;
	}
</style>

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

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

目次に戻る

引数: even

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

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

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

:nth-last-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-last-child(even){
		background-color: ##lightskyblue;
	}
</style>

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

目次に戻る

引数: ?n

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

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