CSSの:nth-last-of-type()で、親要素内の特定のタイプの要素を後ろから数えて選択する方法をわかりやすく解説

2024.09.13
スポンサーリンク

:nth-last-of-type() は、親要素の中で指定された要素のタイプを後ろから数えてスタイルを適用する擬似クラスです。このクラスは、同じタグの中での順序に基づいてスタイルを指定したいときに便利です。

スポンサーリンク

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

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

注意点や関連情報

:nth-last-of-type() は同じタイプの要素に対してのみ有効です。例えば、リストの中で同じタグ（div など）が複数あり、それらを後ろから数えて選択したい場合に使用します。異なるタグは影響を受けません。

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

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

:nth-last-of-type()は、同じタグ名（同じタイプ）の兄弟要素に対して適用されます。対象要素が親要素内で唯一のものである場合や、同じタイプの兄弟要素が存在しない場合、この擬似クラスは機能しません。
対策：同じタグ名（例：<li>、<p>など）の兄弟要素が正しく存在しているか確認し、複数の同じタイプの要素に対して適用することを確認します。

共通する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-last-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-last-of-type(odd) {
    background-color: lightgreen;
}

表示結果

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

CSS :nth-last-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-last-of-type(even) {
    background-color: lightcoral;
}

表示結果

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

CSS :nth-last-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-last-of-type(3n) {
    background-color: lightyellow;
}

表示結果

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

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

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

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

表示結果

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

まとめ

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