CSSの:nth-child()で、親要素内の特定の順番の要素にスタイルを適用する方法をわかりやすく解説

2024.09.13
スポンサーリンク

:nth-child() は、親要素の子要素の位置に基づいてスタイルを適用する擬似クラスです。:nth-child() を使用することで、特定の順番にある要素に対して異なるスタイルを簡単に適用できます。

スポンサーリンク

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

  • odd – 奇数番目の要素にスタイルを適用します。
  • even – 偶数番目の要素にスタイルを適用します。
  • n – 指定した数の倍数番目の要素にスタイルを適用します。3n など。
  • 2n+1 – 2の倍数 + 1の位置にある要素（奇数番目）にスタイルを適用します。

注意点や関連情報

:nth-child()は、HTMLの構造に依存するため、適用される順序は実際にDOM上でどのように並んでいるかに影響されます。また、:nth-child() は、要素全体ではなく、親要素内の順番で判断されるため、異なる種類の要素に対しても同じスタイルが適用されることはありません。

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

兄弟要素の構造が異なる

:nth-child()は、親要素内の全ての子要素をカウントし、その位置に基づいてスタイルを適用します。そのため、指定した要素が期待通りの順番にない場合、スタイルが適用されないことがあります。
対策：:nth-child()を適用したい要素が、親要素内で正しい順番にあるかを確認します。他の兄弟要素が予期せず挿入されていないか、構造を見直します。

共通するCSSコード

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

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

表示例

CSS :nth-child(odd)

odd は奇数番目の要素にスタイルを適用する際に使用します。1, 3, 5…のように、奇数番目の要素に適用されます。

HTMLコード

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

CSSコード

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

表示結果

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

CSS :nth-child(even)

even は偶数番目の要素にスタイルを適用する際に使用します。2, 4, 6…のように、偶数番目の要素に適用されます。

HTMLコード

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

CSSコード

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

表示結果

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

CSS :nth-child(3n)

3n は3の倍数番目の要素にスタイルを適用します。3, 6, 9…のように、3の倍数番目の要素に適用されます。

HTMLコード

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

CSSコード

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

表示結果

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

CSS :nth-child(2n+1)

2n+1 は2の倍数に1を加えた要素（奇数番目）にスタイルを適用します。1, 3, 5…のように奇数番目の要素に適用されます。

HTMLコード

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

CSSコード

.css-sample-item:nth-child(2n+1) {
    border: 2px solid blue;
}

表示結果

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

まとめ

  • :nth-child() を使用することで、順番に基づいて柔軟にスタイルを適用できます。
  • 倍数や式を利用して、特定の要素にスタイルを適用可能です。
  • odd と even を使って奇数・偶数の要素にスタイルを設定できます。
スポンサーリンク