CSS nth-last-child の徹底解説！後ろから数えて要素を選択する魔法のセレクタ

CSSセレクタ :nth-last-child の詳細解説

:nth-last-child は、要素の子要素のうち、後ろから数えて特定の位置にある要素を選択するための CSS セレクタです。

構文

.selector:nth-last-child(n) {
  /* スタイル */
}

• selector: 対象となる要素を指定するセレクタ
• n: 子要素の後ろからの位置を表す数値

使い方

:nth-last-child は、以下の使い方があります。

• 特定の位置にある要素を選択
  • 例：li:nth-last-child(2) は、リスト内の後ろから2番目の li 要素を選択します。
• 最後の要素を選択
• 偶数番目/奇数番目の要素を選択
  • 例：p:nth-last-child(even) は、p 要素の偶数番目の要素を選択します。

注意点

• :nth-last-child は、直接の子要素にのみ適用されます。孫要素以降には適用されません。
• :nth-last-child は、要素の表示順序に影響されます。隠れた要素はカウントされません。
• :nth-last-child は、IE8 以前ではサポートされていません。

応用例

• リストの最後の要素に背景色を設定
• テーブルの偶数番目の行に背景色を設定
• 記事の最後の段落にマージンを設定

その他のnth-childセレクタ

• :nth-child(n): 前から数えてn番目の要素を選択
• :nth-of-type(n): 同じ型の要素の中でn番目の要素を選択

補足

• :nth-last-child は、JavaScript と組み合わせて、動的にスタイルを変更するなど、より高度な操作にも使用できます。
• :nth-last-child は、複雑なセレクタになりやすいので、使用には注意が必要です。

:nth-last-child は、要素の子要素のうち、後ろから数えて特定の位置にある要素を選択するための便利なセレクタです。使い方を理解すれば、様々なレイアウトやデザインを実現することができます。

:nth-last-child サンプルコード

リストの最後の要素に背景色を設定

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
  <li>リスト項目4</li>
</ul>

li:nth-last-child(1) {
  background-color: #ff0000;
}

• リストの最後の要素が赤色になります。

テーブルの偶数番目の行に背景色を設定

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>20歳</td>
  </tr>
  <tr>
    <td>佐藤花子</td>
    <td>30歳</td>
  </tr>
  <tr>
    <td>田中一郎</td>
    <td>40歳</td>
  </tr>
</table>

tr:nth-last-child(even) {
  background-color: #f0f0f0;
}

結果:

• テーブルの偶数番目の行が薄い灰色になります。

記事の最後の段落にマージンを設定

<article>
  <h1>記事タイトル</h1>
  <p>記事本文</p>
  <p>記事本文</p>
  <p>記事本文</p>
</article>

p:nth-last-child(1) {
  margin-bottom: 20px;
}

結果:

• 記事の最後の段落に下マージンが設定されます。

その他のサンプル

• 画像の最後の要素に枠線を表示
• ナビゲーションの最初の要素に背景色を設定
• フッターの最後の要素に中央揃えを設定

:nth-last-child は、様々な要素にスタイルを適用するために使用できます。上記はあくまでもサンプルコードなので、ご自身のニーズに合わせてコードを編集してください。

:nth-last-child の代替方法

JavaScript を使用して、要素の後ろからの位置を取得し、それに応じてスタイルを適用することができます。

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
  <li>リスト項目4</li>
</ul>

const listItems = document.querySelectorAll('li');
for (let i = listItems.length - 1; i >= 0; i--) {
  if (i === listItems.length - 1) {
    // 最後の要素
    listItems[i].style.backgroundColor = '#ff0000';
  }
}

nth-child と :last-child を組み合わせることで、後ろから数えて特定の位置にある要素を選択することができます。

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
  <li>リスト項目4</li>
</ul>

li:nth-child(4n):last-child {
  background-color: #ff0000;
}

結果:

• リストの4番目、8番目、12番目...の要素が赤色になります。

nth-of-type と :last-child を組み合わせることで、同じ型の要素の中で後ろから数えて特定の位置にある要素を選択することができます。

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
  <li>リスト項目4</li>
</ul>

li:nth-of-type(2n):last-child {
  background-color: #ff0000;
}

CSS :last-of-type

:last-of-type は、同じ型の要素の中で最後の要素を選択するためのセレクタです。

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
  <li>リスト項目4</li>
</ul>

li:last-of-type {
  background-color: #ff0000;
}

:nth-last-child は、様々な方法で代替することができます。どの方法を使用するかは、状況やニーズによって異なります。