CSSの:nth-of-type()で、親要素内の特定のタイプの要素に順序に基づいてスタイルを適用する方法をわかりやすく解説

2024.09.13
スポンサーリンク

:nth-of-type() は、親要素の中で指定された要素のタイプを数えてスタイルを適用する擬似クラスです。このクラスは、特定のタイプの要素に対して順序に基づいてスタイルを指定したい場合に便利です。

スポンサーリンク

:nth-of-type() の値とその効果の一覧

  • odd – 奇数番目の指定されたタイプの要素にスタイルを適用します。
  • even – 偶数番目の指定されたタイプの要素にスタイルを適用します。
  • n – 指定された数の倍数番目の要素にスタイルを適用します。例: 3n。
  • 2n+1 – 奇数番目の指定されたタイプの要素にスタイルを適用します。

注意点や関連情報

:nth-of-type() は、同じタイプの要素（同じタグ）に対してのみ有効です。異なるタグは選択されず、同じタグ内での順序に基づいてスタイルが適用されます。

:nth-of-type()が効かない理由として考えられること

同じタイプの兄弟要素が存在しない

:nth-of-type()は、同じタグ名の兄弟要素に適用されます。親要素内で同じタグ名の兄弟要素が存在しない場合、:nth-of-type()は機能しません。
対策：対象の要素と同じタグ名の兄弟要素が存在しているか確認し、複数の同じタイプの要素が親要素内にあることを確認します。

共通するCSSコード

.css-sample-container {
    padding: 20px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    max-width: 400px;
}

.css-sample-item {
    padding: 10px;
    margin-bottom: 5px;
}

表示例

CSS :nth-of-type(odd)

odd は奇数番目の指定されたタイプの要素にスタイルを適用します。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-item-odd">アイテム 1</div>
    <div class="css-sample-item css-sample-item-odd">アイテム 2</div>
    <div class="css-sample-item css-sample-item-odd">アイテム 3</div>
    <div class="css-sample-item css-sample-item-odd">アイテム 4</div>
</div>

CSSコード

.css-sample-item-odd:nth-of-type(odd) {
    background-color: lightgreen;
}

表示結果

アイテム 1
アイテム 2
アイテム 3
アイテム 4

CSS :nth-of-type(even)

even は偶数番目の指定されたタイプの要素にスタイルを適用します。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-item-even">アイテム 1</div>
    <div class="css-sample-item css-sample-item-even">アイテム 2</div>
    <div class="css-sample-item css-sample-item-even">アイテム 3</div>
    <div class="css-sample-item css-sample-item-even">アイテム 4</div>
</div>

CSSコード

.css-sample-item-even:nth-of-type(even) {
    background-color: lightcoral;
}

表示結果

アイテム 1
アイテム 2
アイテム 3
アイテム 4

CSS :nth-of-type(3n)

3n は3の倍数番目の指定されたタイプの要素にスタイルを適用します。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-item-3n">アイテム 1</div>
    <div class="css-sample-item css-sample-item-3n">アイテム 2</div>
    <div class="css-sample-item css-sample-item-3n">アイテム 3</div>
    <div class="css-sample-item css-sample-item-3n">アイテム 4</div>
    <div class="css-sample-item css-sample-item-3n">アイテム 5</div>
    <div class="css-sample-item css-sample-item-3n">アイテム 6</div>
</div>

CSSコード

.css-sample-item-3n:nth-of-type(3n) {
    background-color: lightyellow;
}

表示結果

アイテム 1
アイテム 2
アイテム 3
アイテム 4
アイテム 5
アイテム 6

CSS :nth-of-type(2n+1)

2n+1 は奇数番目の指定されたタイプの要素にスタイルを適用します。(nには0も含まれる。)

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-item-2n1">アイテム 1</div>
    <div class="css-sample-item css-sample-item-2n1">アイテム 2</div>
    <div class="css-sample-item css-sample-item-2n1">アイテム 3</div>
    <div class="css-sample-item css-sample-item-2n1">アイテム 4</div>
</div>

CSSコード

.css-sample-item-2n1:nth-of-type(2n+1) {
    background-color: lightpink;
}

表示結果

アイテム 1
アイテム 2
アイテム 3
アイテム 4

まとめ

  • :nth-of-type() は、同じタイプの要素を対象に、順序に基づいてスタイルを適用します。
  • odd と even を使用して、奇数・偶数番目の要素にスタイルを適用できます。
  • 倍数や式を使って、特定の順序に応じてスタイルを適用することが可能です。
スポンサーリンク