CSSセレクター: :nth-last-child() で最後の要素の前にある要素を選択する方法

2024-06-18

CSS で最後の要素の前にある要素を選択する方法

nth-last-child() 擬似クラスは、要素の兄弟要素の中で、後ろから数えて何番目の要素であるかを指定できます。最後の要素の前にある要素を選択するには、nth-last-child(2) を使用します。

/* すべての要素にスタイルを適用 */
li {
  background-color: #f0f0f0;
}

/* 最後の要素の前にある要素にのみスタイルを適用 */
li:nth-last-child(2) {
  background-color: #ccc;
}

この例では、li 要素すべてに薄いグレーの背景色を適用し、最後の要素の前にある要素のみ濃いグレーの背景色に変更します。

:last-of-type 擬似クラスと相対セレクタを使う

last-of-type 擬似クラスは、特定の種類の要素の中で最後の要素のみを選択します。相対セレクタと組み合わせることで、最後の要素の前にある特定の種類の要素を選択できます。

/* すべての要素にスタイルを適用 */
li {
  background-color: #f0f0f0;
}

/* 最後の `li` 要素の前にある `a` 要素にのみスタイルを適用 */
li:last-of-type a {
  color: red;
}

JavaScript を使用して、最後の要素の前にある要素を動的に選択することもできます。ただし、この方法は CSS のみで解決できる場合よりも複雑になります。

以下の例は、JavaScript で最後の要素の前にある要素すべてに赤いボーダーを追加する方法を示します。

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript で最後の要素の前にある要素を選択する</title>
  <style>
    li {
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <ul>
    <li>要素 1</li>
    <li>要素 2</li>
    <li>要素 3</li>
    <li>要素 4</li>
  </ul>

  <script>
    const listItems = document.querySelectorAll('li');
    const lastItem = listItems[listItems.length - 1];
    const previousItems = lastItem.parentNode.querySelectorAll('li:not(:last-child)');

    for (const item of previousItems) {
      item.style.border = '1px solid red';
    }
  </script>
</body>
</html>

この例では、まず querySelectorAll() メソッドを使用して、すべての li 要素を取得します。次に、length プロパティを使用して最後の要素のインデックスを取得し、その要素を取得します。最後に、parentNode プロパティと querySelectorAll() メソッドを使用して、最後の要素以外のすべての li 要素を取得し、赤いボーダーを設定します。

シンプルでわかりやすい方法が必要な場合は、nth-last-child() 擬似クラスを使用するのがおすすめです。
最後の要素の前にある特定の種類の要素のみを選択する必要がある場合は、last-of-type 擬似クラスと相対セレクタを使用するのがおすすめです。
より柔軟な制御が必要な場合は、JavaScript を使用する必要があります。

HTML

<!DOCTYPE html>
<html>
<head>
  <title>CSS で最後の要素の前にある要素を選択する</title>
  <style>
    /* すべての要素にスタイルを適用 */
    li {
      background-color: #f0f0f0;
    }

    /* 最後の要素の前にある要素にのみスタイルを適用 */
    li:nth-last-child(2) {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <ul>
    <li>要素 1</li>
    <li>要素 2</li>
    <li>要素 3</li>
    <li>要素 4</li>
    <li>要素 5</li>
  </ul>
</body>
</html>

CSS

説明

li セレクタは、すべての li 要素を選択します。
background-color: #f0f0f0; プロパティは、すべての li 要素の背景色を薄いグレーに設定します。
:nth-last-child(2) 擬似クラスは、後ろから 2 番目の li 要素のみを選択します。

結果

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

要素 1
要素 2
要素 3
要素 4
<span style="background-color: #ccc;">要素 5</span>

最後の要素 要素 5 のみ、背景色が濃いグレーになります。

応用例

この方法は、以下のような場合に役立ちます。

記事ページで最後の記事にのみ異なるスタイルを適用したい場合
商品リストページで最後の商品にのみセール情報などを表示したい場合
ギャラリーページで最後の画像にのみキャプションを表示したい場合

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript で最後の要素の前にある要素を選択する</title>
  <style>
    li {
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <ul>
    <li>要素 1</li>
    <li>要素 2</li>
    <li>要素 3</li>
    <li>要素 4</li>
  </ul>

  <script>
    const listItems = document.querySelectorAll('li');
    const lastItem = listItems[listItems.length - 1];
    const previousItems = lastItem.parentNode.querySelectorAll('li:not(:last-child)');

    for (const item of previousItems) {
      item.style.border = '1px solid red';
    }
  </script>
</body>
</html>

CSS で最後の要素の前にある要素を選択するには、いくつかの方法があります。それぞれの特徴と使い分けを理解し、状況に応じて適切な方法を選択してください。

CSS で最後の要素の前にある要素を選択するその他の方法

:not() 擬似クラスと組み合わせる

nth-last-child() 擬似クラスと :not() 擬似クラスを組み合わせることで、より柔軟な選択が可能です。例えば、最後の li 要素の前にあるすべての要素にスタイルを適用するには、以下のコードを使用できます。

/* すべての要素にスタイルを適用 */
li {
  background-color: #f0f0f0;
}

/* 最後の `li` 要素を除くすべての要素にスタイルを適用 */
li:not(:last-child) {
  background-color: #ccc;
}

このコードは、最後の li 要素のみ白い背景色を残し、それ以外の要素すべてをグレーの背景色に変更します。

兄弟要素のセレクタを使用して、特定の兄弟要素のみを選択することもできます。例えば、最後の li 要素の前にある a 要素のみを選択するには、以下のコードを使用できます。

/* すべての要素にスタイルを適用 */
li a {
  color: #000;
}

/* 最後の `li` 要素の `a` 要素にのみスタイルを適用 */
li:last-child a {
  color: red;
}

このコードは、すべての a 要素を黒いテキスト色に設定し、最後の li 要素の a 要素のみ赤いテキスト色に変更します。

/* すべての要素にスタイルを適用 */
p {
  margin-bottom: 10px;
}

/* 最後の `li` 要素の前のすべての `p` 要素にのみスタイルを適用 */
li:last-child ~ p {
  margin-bottom: 20px;
}

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript で最後の要素の前にある要素を選択する</title>
  <style>
    li {
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <ul>
    <li>要素 1</li>
    <li>要素 2</li>
    <li>要素 3</li>
    <li>要素 4</li>
  </ul>

  <script>
    const listItems = document.querySelectorAll('li');
    const lastItem = listItems[listItems.length - 1];
    const previousItems = lastItem.parentNode.querySelectorAll('li:not(:last-child)');

    for (const item of previousItems) {
      item.style.border = '1px solid red';
    }
  </script>
</body>
</html>