擬似クラス nth-of-type
擬似クラス nth-of-type は、
指定されたタイプの n 番目の子孫である要素を選択します。
つまり、h2:nth-of-type(4) と書けば、
親要素内の 4 番目の h2 が見つかります
（これは、親要素内の 4 番目の子要素である h2 のみを
見つける nth-child
とは異なります）。
構文
セレクタ:nth-of-type(数値 | odd | even | 式){
}
値
| 値 | 説明 |
|---|---|
| 数値 |
1から始まる正の数値。対象としたい要素の番号を指定します。
要素の番号は 1 から始まります。
|
odd |
奇数番目の要素。 |
even |
偶数番目の要素。 |
| 式 |
文字 n を使った特別な式を組むことができます。n は
0から（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>
</div>
h2:nth-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>
</div>
h2:nth-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>
</div>
h2:nth-of-type(odd) {
color: red;
}
:
