CSS :nth-last-of-type() パseudoクラス

定義と使用方法

CSS :nth-last-of-type(n) パseudoクラスは、親要素の中で特定のタイプの倒数第 n 個の要素の各要素。

n 数字/インデックス、キーワード（oddまたはeven）または公式（an + bなど）であってよい。

ヒント：参照 :nth-last-child() パseudoクラスは、親要素の中で特定のタイプの倒数第 n 個の要素の要素、タイプに関係なく。

例

例1

親要素の倒数2番目の<p>要素の倒数2番目の<p>要素に背景色を指定しています。

同時に、親要素の倒数3番目の<li>要素の倒数3番目の<li>要素に背景色を指定しています：

p:nth-last-of-type(2) {
  background: red;
}
li:nth-last-of-type(3) {
background: yellow;
}

実際に試してみてください

例2

odd および even キーワードであり、奇数または偶数のインデックスの子要素に一致することができます（最初の子要素のインデックスは1です）。

ここでは、奇数インデックスおよび偶数インデックスの<p>要素に異なる背景色を指定しています：

p:nth-last-of-type(odd) {
  background: red;
}
p:nth-last-of-type(even) {
  background: blue;
}

実際に試してみてください

例3

公式（an + b）を使用して説明します：aは整数の歩長、nは0から始まるすべての非負整数、bは整数のオフセットです。

ここでは、インデックスが3の倍数のすべての<p>および<li>要素に背景色を指定しています：

p:nth-last-of-type(3n) {
  background: red;
}
li:nth-last-of-type(3n) {
  background: yellow;
}

実際に試してみてください

CSS文法

:nth-last-of-type(index | 奇数 | 偶数 | an+b) {
  css宣言;
}

技術的詳細

ブラウザのサポート

テーブルの数字は、そのパseudoクラスを完全にサポートする最初のブラウザのバージョンを指定しています。