⌘K

擬似クラス nth-last-of-type

擬似クラス nth-last-of-type は、 指定された型の親の末尾から数えてn番目の子孫である 要素を選択します。 nth-of-type と同様の動作をしますが、末尾から数える点が異なります。

構文

cssセレクター:nth-last-of-type(数値 | odd | even | 式) {
  
}

値

値 説明
数値 1から始まる正の整数です。 対象としたい要素の番号を指定します。 要素の番号付けは 1 から始まります。
odd 奇数の要素。
even 偶数の要素。
式 文字 n を使用した特別な式を構成できます。 この n は、ゼロ（1ではありません）から無限大までの すべての整数を表します。したがって、2n は すべての偶数（2番目から始まる）を意味します。
どのように理解すればよいでしょうか？ n に 0 以降の数値を順に代入します：n = 0 の場合、2n は 0 となります - そのような要素は存在しません（要素の番号付けは 1 から始まります）。 n = 1 の場合、2n は 2 となり、2番目の要素です。n = 2 の場合、 2n は 4 となり、4番目の要素です。3n と書くと、 これは3つおきの要素（3番目から始まる）を意味します。

例

親要素内で、末尾から数えて 2 番目の h2 を見つけます： 

html<div>
  <h2>見出し</h2>
  <p>段落</p>
  
  <h2>見出し</h2>
  <p>段落</p>
  
  <h2>見出し</h2>
  <p>段落</p>
  
  <h2>見出し</h2>
  <p>段落</p>
  
  <h2>見出し</h2>
  <p>段落</p>
  
  <h2>見出し</h2>
  <p>段落</p>
  
  <h2>見出し</h2>
  <p>段落</p>
</div>
cssh2:nth-last-of-type(2) {
  color: red;
}

Результат:

例

末尾から数えてすべての偶数番目の h2 を見つけます： 

html<div>
  <h2>見出し</h2>
  <p>段落</p>
  
  <h2>見出し</h2>
  <p>段落</p>
  
  <h2>見出し</h2>
  <p>段落</p>
  
  <h2>見出し</h2>
  <p>段落</p>
  
  <h2>見出し</h2>
  <p>段落</p>
  
  <h2>見出し</h2>
  <p>段落</p>
  
  <h2>見出し</h2>
  <p>段落</p>
</div>
cssh2:nth-last-of-type(even) {
  color: red;
}

Результат:

例

末尾から数べてすべての奇数番目の h2 を見つけます： 

html<div>
  <h2>見出し</h2>
  <p>段落</p>
  
  <h2>見出し</h2>
  <p>段落</p>
  
  <h2>見出し</h2>
  <p>段落</p>
  
  <h2>見出し</h2>
  <p>段落</p>
  
  <h2>見出し</h2>
  <p>段落</p>
  
  <h2>見出し</h2>
  <p>段落</p>
  
  <h2>見出し</h2>
  <p>段落</p>
</div>
cssh2:nth-last-of-type(odd) {
  color: red;
}

Результат:

Back擬似クラス nth-of-typeNext疑似クラス only-of-type