【CSS初心者向け】nth-last-childを使いこなして、自由自在なレイアウトを実現しよう！

nth-last-child は、CSS の擬似クラスセレクタの一つで、要素の子要素の中から、後ろから数えて特定の順番にある要素を選択するためのものです。兄弟要素のグループの中で、最後の要素から順番に数えていくのが特徴です。

構文

:nth-last-child(n)

ここで、n は以下のいずれかを表します。

n+b: n 番目の要素から b 個の要素を選択します。例えば、:nth-last-child(3+2) は、後ろから 3 番目、4 番目の要素を選択します。
奇数: 奇数番目の要素を選択します。例えば、:nth-last-child(odd) は、後ろから 1 番目、3 番目、5 番目... の要素を選択します。
偶数: 偶数番目の要素を選択します。例えば、:nth-last-child(even) は、後ろから 2 番目、4 番目、6 番目... の要素を選択します。
整数: n 番目の要素を選択します。例えば、:nth-last-child(2) は、後ろから 2 番目の要素を選択します。

例

以下の例は、ul 要素の子要素である li 要素の中から、後ろから 2 番目の要素に赤い背景色を設定します。

ul li:nth-last-child(2) {
  background-color: red;
}

以下の例は、div 要素の子要素である全ての要素の中で、偶数番目の要素に余白を設定します。

div *:nth-last-child(even) {
  margin: 10px;
}

要素が 1 つしかない場合は、:nth-last-child(n) は常にその要素を選択します。
n は 1 から始まります。つまり、最後の要素は :nth-last-child(1) で選択できます。
:nth-last-child は、兄弟要素のグループ内でのみ要素を対象とします。例えば、ul 要素の子要素である li 要素全てを対象としたい場合は、li:nth-last-child(n) ではなく、ul li:nth-child(n) と記述する必要があります。

<table>
  <tr><th>項目1</th><th>項目2</th><th>項目3</th></tr>
  <tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
  <tr><td>データ4</td><td>データ5</td><td>データ6</td></tr>
</table>

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

例 2：リストの偶数番目の項目にマージンを設定

この例では、HTML リストの偶数番目の項目にのみマージンを設定する方法を示します。

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

ul li:nth-last-child(even) {
  margin: 10px 0;
}

例 3：フォームの最後の入力欄にフォーカスを設定

この例では、HTML フォームの最後の入力欄にフォーカスを設定する方法を示します。

<form>
  <label for="name">名前:</label>
  <input type="text" id="name">

  <label for="email">メールアドレス:</label>
  <input type="email" id="email">

  <label for="message">メッセージ:</label>
  <textarea id="message"></textarea>

  <button type="submit">送信</button>
</form>

form input,
form textarea:nth-last-child(1) {
  focus: outline 2px solid blue;
}

例 4：画像ギャラリーの最後の画像に余白を設定

この例では、HTML 画像ギャラリーの最後の画像にのみ余白を設定する方法を示します。

<div class="gallery">
  <img src="image1.jpg" alt="画像1">
  <img src="image2.jpg" alt="画像2">
  <img src="image3.jpg" alt="画像3">
</div>

.gallery img:nth-last-child(1) {
  margin-right: 20px;
}

例 5：記事の最後の段落にボーダーを設定

この例では、HTML 記事の最後の段落にのみボーダーを設定する方法を示します。

<article>
  <h2>記事タイトル</h2>
  <p>本文1</p>
  <p>本文2</p>

  <blockquote>引用文</blockquote>

  <p>本文3</p>
</article>

article p:nth-last-child(1) {
  border: 1px solid #ccc;
}

これらの例は、nth-last-child セレクタを様々な用途で使用できることを示しています。

商品ページの最後の商品画像にのみ割引バッジを表示する
フッターのソーシャルメディアアイコンを右揃えにする
ナビゲーションバーの最後のメニュー項目にドロップダウン矢印を追加する

代替方法

以下に、nth-last-child の代替となる主な方法をいくつか紹介します。

:last-child と :not() の組み合わせ

:last-child は、要素の子要素の中で最後の要素のみを選択します。:not() は、指定されたセレクタに一致しない要素を選択します。これらのセレクタを組み合わせて、後ろから 2 番目の要素を選択することができます。

ul li:not(:last-child):last-child {
  /* スタイル */
}

この例では、ul 要素の子要素である li 要素の中で、最後の要素を除いた最後の要素にスタイルを適用します。つまり、後ろから 2 番目の要素にスタイルが適用されます。

JavaScript を使用する

JavaScript を使用して、後ろから特定の順番にある要素を動的に選択することもできます。

const elements = document.querySelectorAll('li');
const secondLastElement = elements[elements.length - 2];

secondLastElement.style.backgroundColor = 'red';

この例では、JavaScript で li 要素のリストを取得し、そのリストから後ろから 2 番目の要素を取得して、背景色を赤色に設定しています。

jQuery を使用する

jQuery を使用している場合は、jQuery のメソッドを使用して後ろから特定の順番にある要素を選択することができます。

$('li:nth-last-child(2)').css('background-color', 'red');

この例では、jQuery の nth-last-child メソッドを使用して、li 要素の中で後ろから 2 番目の要素を取得し、背景色を赤色に設定しています。

CSS の :nth-of-type() セレクタを使用する

:nth-of-type() セレクタは、特定の種類の要素の中で、後ろから数えて特定の順番にある要素を選択することができます。

ul li:nth-of-type(2n) {
  /* スタイル */
}

この例では、ul 要素の子要素である li 要素の中で、偶数番目の要素にスタイルを適用します。つまり、後ろから 2 番目、4 番目、6 番目... の要素にスタイルが適用されます。

CSS の :nth-child() セレクタを使用する

:nth-child() セレクタは、要素の子要素の中で、前から数えて特定の順番にある要素を選択することができます。このセレクタを工夫して、後ろから数えることもできます。

ul li:nth-child(-2n + 1) {
  /* スタイル */
}

どの方法を選択すべきか

どの方法を選択すべきかは、状況によって異なります。

前後からの要素の番号を自由に指定したい場合は、:nth-child() セレクタを工夫して使用することができます。
特定の種類の要素のみを対象としたい場合は、:nth-of-type() セレクタがおすすめです。
より柔軟な制御が必要な場合は、JavaScript または jQuery を使用する方が良いでしょう。
シンプルで分かりやすい方法が必要な場合は、:last-child と :not() の組み合わせがおすすめです。