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

2024.09.13
スポンサーリンク

:nth-last-child() は、親要素の子要素を後ろから数えた順番に基づいてスタイルを適用する擬似クラスです。通常の :nth-child() とは逆方向から数えるため、最後の要素から順番にスタイルを適用したい場合に便利です。

スポンサーリンク

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

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

注意点や関連情報

:nth-last-child()は、後ろから数えた順序に基づいてスタイルを適用します。通常の :nth-child() とは異なり、リストや項目の後ろに近い要素にスタイルを当てたい場合に便利です。また、:nth-last-child() と :nth-child() を組み合わせて、柔軟にスタイルを適用できます。

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

兄弟要素の構造が異なる

:nth-last-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-last-child(odd)

odd は後ろから奇数番目の要素にスタイルを適用します。

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-last-child(odd) {
    background-color: lightgreen;
}

表示結果

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

CSS :nth-last-child(even)

even は後ろから偶数番目の要素にスタイルを適用します。

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-last-child(even) {
    background-color: lightcoral;
}

表示結果

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

CSS :nth-last-child(3n)

3n は後ろから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-last-child(3n) {
    background-color: lightyellow;
}

表示結果

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

CSS :nth-last-child(2n+1)

2n+1 は後ろから奇数番目の要素にスタイルを適用します。

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-last-child(2n+1) {
    background-color: lightpink;
}

表示結果

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

まとめ

  • :nth-last-child() を使用することで、要素を後ろから数えて特定のスタイルを適用できます。
  • odd と even を使って、後ろから見た奇数・偶数番目の要素にスタイルを適用可能です。
  • 倍数や式を活用することで、柔軟にスタイルを適用することができます。
スポンサーリンク