CSS :nth-of-type()疑似クラス：同じタグ名を持つ兄弟要素の中からn番目の要素を選択

定義と使い方

:nth-of-type(n)疑似クラスセレクターは、
特定の種類（タグ名）の兄弟要素のみを基準として、n番目に位置する要素を選択します。

特定の種類とは、タグ名の種類を指します。

例えば、p:nth-of-type(2)は、同じ親要素内にある<p>要素のみを数え、その中で2番目の<p>要素を選択します。

基本例

HTML

<section>
    <p>'p' タグの種類の中で1番目の要素</p>
    <div>'div' タグの種類の中で1番目の要素</div>
    <p>'p' タグの種類の中で2番目の要素</p>
    <p>'p' タグの種類の中で3番目の要素</p>
    <div>'div' タグの種類の中で2番目の要素</div>
    <div>'div' タグの種類の中で3番目の要素</div>
</section>

CSS

/* <section>内の<p>タグタイプの子要素のうち、
 * <p>タグタイプを基準として
 * 2番目に位置する要素
*/
section p:nth-of-type(2) {
    background-color: yellowgreen;
}

/* <section>内の<div>タグタイプの子要素のうち、
 * <div>タグタイプを基準として
 * 2番目に位置する要素
*/
section div:nth-of-type(2) {
    background-color: orange;
}

構文

CSS

/* 正の整数：n番目 */
li:nth-of-type(1) /* 同じ親要素内の<li>要素のみを数え、1番目の<li>要素を選択 */
li:nth-of-type(7) /* 同じ親要素内の<li>要素のみを数え、7番目の<li>要素を選択 */

/* キーワード：even / odd */
li:nth-of-type(odd)  /* 同じ親要素内の<li>要素のみを数え、奇数（1、3、5、…）番目の<li>要素を選択 */
li:nth-of-type(even) /* 同じ親要素内の<li>要素のみを数え、偶数（2、4、6、…）番目の<li>要素を選択 */

/* 数式：An+B */
li:nth-of-type(2n) /* 同じ親要素内の<li>要素のみを数え、2の倍数番目の<li>要素を選択 */
li:nth-of-type(3n) /* 同じ親要素内の<li>要素のみを数え、3の倍数番目の<li>要素を選択 */

li:nth-of-type(3n + 1) /* 同じ親要素内の<li>要素のみを数え、3の倍数に1を加えた番目の<li>要素を選択 */
li:nth-of-type(3n - 1) /* 同じ親要素内の<li>要素のみを数え、3の倍数から1を引いた番目の<li>要素を選択 */

形式構文

:nth-of-type(n)疑似クラスでは、nを1つの引数として指定します。

引数`n`の値

選択したい要素を指定するための引数です。引数nの値は、次の3つの方法で指定できます。

非負の整数のインデックス値
キーワード値（oddまたはeven）
An+B形式のユーザー定義パターン

非負の整数のインデックス値

非負の整数でインデックスを付け、その順序に該当する要素を選択します。インデックスは1から始まります。

HTML

<section>
    <p>'p' タグの種類の1番目のp</p>
    <div>'div' タグの種類の1番目のdiv</div>
    <p>'p' タグの種類の2番目のp</p>
</section>

キーワード値（`odd`または`even`）

:nth-of-type(n)疑似クラスのキーワード値の説明
`odd`	特定の種類（タグ名）の兄弟要素の中から、その種類を基準として奇数番目（1、3、5、7、…）に位置する要素を選択します。
`even`	特定の種類（タグ名）の兄弟要素の中から、その種類を基準として偶数番目（2、4、6、8、…）に位置する要素を選択します。

HTML

<section>
    <p>'p' タグの種類の中で1番目の要素</p>
    <div>'div' タグの種類の中で1番目の要素</div>
    <p>'p' タグの種類の中で2番目の要素</p>
    <p>'p' タグの種類の中で3番目の要素</p>
    <div>'div' タグの種類の中で2番目の要素</div>
    <div>'div' タグの種類の中で3番目の要素</div>
</section>

`An+B`形式のユーザー定義パターン

An+B形式のユーザー定義パターンを満たすインデックスを持つ要素を選択します。

Aは、整数インデックスの増分ステップを表します。
Bは整数のオフセットを表し、省略することも可能です。
nは0から始まるすべての正の整数を表します。

これは、リストのAn+B番目の要素と解釈できます。

CSS

:nth-of-type(5n)
/*
 * 0［=5×0］、5［=5×1］、10［=5×2］、15［=5×3］、…番目の要素を表します。
 * 要素のインデックスは1から始まるため、0番目の要素は存在せず、5、10、15、…番目の要素を表します。
 * 結論として、5nは5の倍数番目の要素を選択します。
*/

:nth-of-type(5n-1)
/*
 * -1［=5×0-1］、4［=5×1-1］、9［=5×2-1］、14［=5×3-1］、…番目の要素を表します。
 * 要素のインデックスは1から始まるため、-1番目の要素は存在せず、4、9、14、…番目の要素を表します。
 * 結論として、5n-1は5の倍数番目の1つ前の要素を選択します。
*/

:nth-of-type(5n+1)
/*
 * 1［=5×0+1］、6［=5×1+1］、11［=5×2+1］、16［=5×3+1］、…番目の要素を表します。
 * 1、6、11、16、…番目の要素を表します。
 * 結論として、5n+1は5の倍数番目の1つ後の要素を選択します。
*/

:nth-of-type(n)
/*
 * 0［0］、1［1］、2［2］、3［×3］、…番目の要素を表します。
 * 要素のインデックスは1から始まるため、0番目の要素は存在せず、1、2、3、…番目の要素を表します。
 * 結論として、nは同じ種類のすべての要素を表します。
*/

以下は、:nth-of-type(An+B)セレクターを活用し、要素の選択をパターン化してスタイルを適用した例です。

HTML

<ol>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ol>

CSS

ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 7px;
}
ol li {
    aspect-ratio: 1/0.5;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
ol li:nth-of-type(5n-1) { /* 5の倍数番目の1つ前の要素を選択 */
    background-color: yellowgreen;
}

この例から分かるように、:nth-of-type(n)疑似クラスセレクターにAn+B形式のユーザー定義パターンを活用すると、要素の選択をパターン化しやすくなります。

注意点

:nth-of-type(n)疑似クラスセレクターは、特定の種類（タグ名）の兄弟要素の中から、その種類を基準としてn番目に位置する要素を選択します。

特定の種類とは、タグ名の種類を指します。

次の例で確認してみましょう。

HTML

<style>
    .red-item:nth-of-type(2) {
        color: red;
        font-weight: bold;
    }
</style>
<ol>
    <li>li</li>
    <li class="red-item">マッチする要素</li>
    <li class="red-item">マッチすると期待しがちですが、対象外です</li>
</ol>
<!--
    * もしかして、.red-itemタイプの中で2番目の要素を選択したと思っていませんか？
    * その場合は、誤った理解です。
    *
    * .red-item:nth-of-type(2)は、次の2つの要素に分解して考えられます。
    * => .red-item：class属性の値が「red-item」である要素で、そのタグ名は<li>です。
    * => 「特定の種類」とは、タグ名の種類を意味します。
    * => この場合、特定の種類は<li>要素になります。
    * => つまり、タグの種類が<li>であり、かつ<li>要素の中で2番目に位置し、class属性の値が「red-item」である要素が選択されます。
    * => そのため、<li class="red-item">マッチする要素</li>が選択されます。
-->