CSSで要素のすべての子要素を選択する方法（最後の要素を除外する）

2024-04-02

CSSで要素のすべての子要素を選択する方法

要素のすべての子要素を選択したいが、最後の要素は除外したい。

解決策:

以下のCSSセレクタを使用できます。

.parent > * :not(:last-child) {
  /* スタイル */
}

解説:

.parent : 対象となる親要素
> : 直接の子要素のみを選択
* : すべての要素
:not(:last-child) : 最後の要素を除外

例:

<div class="parent">
  <p>子要素1</p>
  <p>子要素2</p>
  <p>子要素3</p>
</div>

.parent > * :not(:last-child) {
  color: red;
}

この例では、.parent 要素のすべての子要素 (p タグ) が赤色で表示されます。ただし、最後の p タグは除外されます。

代替案:

.parent > p:not(:last-child) {
  /* スタイル */
}

このセレクタは、.parent 要素のすべての子要素のうち、p タグのみを選択します。

その他の方法:

JavaScriptを使用するなど、他の方法もあります。

補足:

上記のセレクタは、IE8 以前では動作しません。
複雑なセレクタを使用すると、パフォーマンスが低下する可能性があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSで要素のすべての子要素を選択する方法</title>
  <style>
    .parent {
      background-color: #ccc;
      padding: 10px;
    }

    .parent > * {
      border: 1px solid #ddd;
      padding: 5px;
      margin: 5px;
    }

    .parent > * :not(:last-child) {
      background-color: #fafafa;
    }
  </style>
</head>
<body>
  <div class="parent">
    <p>子要素1</p>
    <p>子要素2</p>
    <p>子要素3</p>
  </div>
</body>
</html>

index.html : HTMLファイル
style.css : CSSファイル

実行結果:

ブラウザで確認:

上記のコードを HTML ファイルと CSS ファイルとして保存し、ブラウザで開くと、以下の結果が表示されます。

.parent 要素は、背景色がグレーで、余白が設定されています。
.parent 要素の子要素 (p タグ) は、すべて境界線と余白が設定されています。
最後の p タグのみ、背景色が薄いグレーになっています。

CSSで要素のすべての子要素を選択する方法（他の方法）

方法1: nth-child() セレクタを使用する

.parent > p:nth-child(n) {
  /* スタイル */
}

このセレクタは、.parent 要素の子要素のうち、n 番目の子要素を選択します。n には、数字または odd / even を指定できます。

.parent > p:nth-child(2) {
  color: red;
}

この例では、.parent 要素の 2 番目の p タグが赤色で表示されます。

方法2: :last-of-type セレクタを使用する

.parent > p:last-of-type {
  /* スタイル */
}

.parent > p:last-of-type {
  background-color: #fafafa;
}

この例では、.parent 要素の最後の p タグのみ、背景色が薄いグレーになります。

方法3: JavaScriptを使用する

const parent = document.querySelector('.parent');
const children = parent.querySelectorAll('*');

for (const child of children) {
  if (child === children[children.length - 1]) {
    continue;
  }

  // スタイルを適用
}