CSSでちょっと裏技！？nth-last-childとlast-of-typeでスマートに2番目に最後の要素を選択

2024-07-27

CSS で 2 番目に最後の要素を選択する方法

今回のように、「2 番目に最後の要素」という条件は、少し特殊なケースになります。そこで、2 つの主要な方法をご紹介します。

方法 1: :nth-last-child() 擬似クラスを使用する

この擬似クラスは、要素の親要素内における位置に基づいて要素を選択することができます。構文は以下の通りです。

selector:nth-last-child(n)

selector: 対象となる要素の種類を指定します。
n: 選択する要素の順番を、後ろから数えます。今回の場合は 2 を指定します。

例えば、以下の HTML 構造の場合、li 要素のうち、2 番目に最後の要素にのみスタイルを適用することができます。

<ul>
  <li>1 番目</li>
  <li>2 番目</li>
  <li>3 番目</li>
  <li>4 番目</li>
  <li>5 番目</li>
</ul>

li:nth-last-child(2) {
  background-color: #f00; /* 赤色背景 */
}

方法 2: :last-of-type 擬似クラスと組み合わせる

この擬似クラスは、特定の種類の要素の中で最後の要素のみを選択します。

selector:last-of-type

上記の :nth-last-child() 擬似クラスと組み合わせることで、2 番目に最後の要素を選択することができます。

li:last-of-type:nth-last-child(2) {
  background-color: #f00; /* 赤色背景 */
}

この方法の利点は、要素の種類をより柔軟に指定できることです。例えば、p 要素のうち、2 番目に最後の要素を選択したい場合は、以下のようになります。

p:last-of-type:nth-last-child(2) {
  background-color: #f00; /* 赤色背景 */
}

上記の例では、li 要素や p 要素を直接セレクタとしていますが、親要素を指定してさらに絞り込むことも可能です。
複数の方法を組み合わせることで、より複雑な条件にも対応できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2番目に最後の要素を選択</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul>
    <li>1 番目</li>
    <li>2 番目</li>
    <li>3 番目</li>
    <li>4 番目</li>
    <li>5 番目</li>
  </ul>

  <p>1 番目のパラグラフ</p>
  <p>2 番目のパラグラフ</p>
  <p>3 番目のパラグラフ</p>
</body>
</html>

CSS コード

/* 方法 1: nth-last-child() 擬似クラスを使用する */
li:nth-last-child(2) {
  background-color: #f00; /* 赤色背景 */
}

/* 方法 2: last-of-type 擬似クラスと組み合わせる */
p:last-of-type:nth-last-child(2) {
  background-color: #0f0; /* 緑色背景 */
}

このコードを実行すると、以下のようになります。

ul 要素の中の 2 番目に最後の li 要素が赤色背景になります。

上記はあくまでも一例です。必要に応じて、セレクタやスタイルを変更してください。

例えば、以下のようなことができます。

特定のクラスを持つ要素のうち、2 番目に最後の要素を選択する
親要素の特定の状態に応じて、2 番目に最後の要素のスタイルを変更する

JavaScript を使用すれば、より柔軟な方法で要素を操作することができます。例えば、以下のコードは、li 要素のうち 2 番目に最後の要素を取得し、背景色を変更します。

const lis = document.querySelectorAll('li');
const secondLast = lis[lis.length - 2];
secondLast.style.backgroundColor = '#f00';

この方法は、動的に要素を追加・削除する場合などに有効です。

方法 4: 兄弟要素の参照を利用する

隣接する要素を参照することで、2 番目に最後の要素を間接的に選択する方法もあります。例えば、以下の CSS コードは、li 要素の直前の li 要素に対して :last-child 擬似クラスを適用することで、2 番目に最後の要素にのみスタイルを適用します。

li:nth-child(n + 1):last-child {
  background-color: #f00; /* 赤色背景 */
}

この方法は、要素構造が単純な場合にのみ有効です。

方法 5: カスタム擬似クラスを使用する

CSS3 では、独自のカスタム擬似クラスを定義することができます。この機能を利用すれば、2 番目に最後の要素を簡単に選択できる擬似クラスを作成することも可能です。

例えば、以下のコードは :second-last-child という擬似クラスを定義し、2 番目に最後の要素にのみスタイルを適用します。

/* style.css */
:nth-child(n + 1):nth-last-child(2) {
  &:before {
    content: ':second-last-child';
  }
}

/* main.css */
:second-last-child {
  background-color: #f00; /* 赤色背景 */
}

この方法は、より汎用的な方法ですが、ブラウザの互換性には注意が必要です。

適切な方法の選び方

どの方法が最適かは、状況によって異なります。

シンプルでわかりやすい方法: :nth-last-child() 擬似クラス
柔軟な制御が必要な場合: JavaScript
要素構造が単純な場合: 兄弟要素の参照
将来性を考えて汎用的な方法が必要: カスタム擬似クラス

それぞれのメリットとデメリットを理解し、状況に合わせて最適な方法を選択してください。

性能: 複雑な CSS セレクタは、レンダリング速度に影響を与える可能性があります。パフォーマンスが重要な場合は、シンプルなセレクタを使用することを検討してください。
保守性: わかりやすく読みやすいコードを書くように心がけましょう。将来、コードを変更したりメンテナンスしたりする際に役立ちます。
アクセシビリティ: 視覚障がい者などのユーザーがコンテンツを理解できるように、適切なセマンティックHTMLとCSSを使用する必要があります。

html css css-selectors