【CSS】:nth-of-type（擬似クラス） - N番目の特定要素
CSSの擬似クラスの１つ、nth-of-typeについてご紹介します。
nth-of-type
擬似クラスnth-of-typeは兄弟要素のN番目の特定要素です。
基本構文
要素名:nth-of-type(N) {
プロパティ名: プロパティ値;
}Nの部分は番目です。
番目の定義形式は３種類あります。
| 形式 | 意味 |
|---|---|
| odd | 奇数番目 |
| even | 偶数番目 |
| An+B | A: 整数、B: 整数、n: 0から始まる自然数 |
サンプル
次のHTMLドキュメントに以下のサンプルを適用します。
<section>
<h2>セレクター</h2>
<p>セレクターは『スタイルを適用する要素』です。</p>
<h2>プロパティ名</h2>
<p>プロパティ名は『スタイルの種類』です。</p>
<h2>プロパティ値</h2>
<p>プロパティ値は『スタイルの値』です。</p>
</section>奇数番目
次のスタイルはh2要素の奇数番目に適用します。
h2:nth-of-type(odd) {
color: red;
}偶数番目
次のスタイルはh2要素の偶数番目に適用します。
h2:nth-of-type(even) {
color: red;
}固定値
次のスタイルはh2要素の３番目に適用します。
h2:nth-of-type(3) {
color: red;
}倍数
次のスタイルはh2要素の２の倍数番目に適用します。
h2:nth-of-type(2n) {
color: red;
}An+B
次のスタイルはh2要素の3n+1（1,4,7...）番目に適用します。
h2:nth-of-type(3n+1) {
color: red;
}
