CSS: :nth-last-of-type (nthラストオブタイプ) の解説 | 独学 Webプログラミング!

:nth-last-of-typeとは

nth: 読み: n番目
意味: n=自然数のこと。th=番目 (序数/ordinal)のこと。
last: 読み: ラスト
意味: 最後の、最近の
of: 読み: オブ
意味: ～の (タイプの)
type: 読み: タイプ
意味: 型、種類

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

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

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

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

結論を言うと、この疑似クラスは「他の要素が混じっていても」その要素タイプだけでカウントしてn番目の要素を検知できるという以外は :nth-last-child と変わりません。

目次に戻る

構文

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

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

目次に戻る

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

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

目次に戻る

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

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

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

List Item1 List Item2 List Item3

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

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

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

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

目次に戻る

引数: even

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

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

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

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

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

目次に戻る

引数: ?n

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

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