擬似クラス nth-last-of-type
擬似クラス nth-last-of-type は、
指定された型の親の末尾から数えてn番目の子孫である
要素を選択します。
nth-of-type
と同様の動作をしますが、末尾から数える点が異なります。
構文
セレクター: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 を見つけます：
<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>
h2:nth-last-of-type(2) {
color: red;
}
:
例
末尾から数えてすべての偶数番目の h2 を見つけます：
<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>
h2:nth-last-of-type(even) {
color: red;
}
:
例
末尾から数べてすべての奇数番目の h2 を見つけます：
<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>
h2:nth-last-of-type(odd) {
color: red;
}
:
