【CSS】:nth-of-type（擬似クラス） - N番目の特定要素

CSSの擬似クラス/nth-of-typeについて解説します。

検証環境

CSS

macOS

14.1

nth-of-type

擬似クラス/nth-of-typeは“兄弟要素のN番目の特定要素を表す擬似クラス”です。

基本構文

要素名:nth-of-type(N) {
    プロパティ名: プロパティ値;
}

Nの部分は番目です。

番目の表現形式は次の種類があります。

形式	意味
N	任意の数値
odd	奇数番目
even	偶数番目
An+B	A: 整数、B: 整数、n: 0から始まる自然数

サンプル

次のHTMLドキュメントに対するnth-of-typeのサンプルを示します。

sample.html

<section>
    <h2>セレクター</h2>
    <p>セレクターは『スタイルを適用する要素』です。</p>
    <h2>プロパティ名</h2>
    <p>プロパティ名は『スタイルの種類』です。</p>
    <h2>プロパティ値</h2>
    <p>プロパティ値は『スタイルの値』です。</p>
</section>

任意の数値

『３番目のh2要素』を指定するセレクターのサンプルです。

sample.css

___ih_hl_start
h2:nth-of-type(3) {
___ih_hl_end
    color: red;
}

プレビュー

奇数番目

『奇数番目のh2要素』を指定するセレクターのサンプルです。

sample.css

___ih_hl_start
h2:nth-of-type(odd) {
___ih_hl_end
    color: red;
}

プレビュー

偶数番目

『偶数番目のh2要素』を指定するセレクターのサンプルです。

sample.css

___ih_hl_start
h2:nth-of-type(even) {
___ih_hl_end
    color: red;
}

プレビュー

倍数

『３の倍数番目のh2要素』を指定するセレクターのサンプルです。

sample.css

___ih_hl_start
h2:nth-of-type(3n) {
___ih_hl_end
    color: red;
}

プレビュー

An+B

『3n+1（1,4,7...）番目のh2要素』を指定するセレクターのサンプルです。

sample.css

___ih_hl_start
h2:nth-of-type(3n+1) {
___ih_hl_end
    color: red;
}

プレビュー