CSSセレクタ：>、、:nth-child()、:not()、::deep()、JavaScript、その他

2024-04-02

CSSで子孫要素を全て選択する方法

> 隣接セレクタ

説明: 親要素の直下の子要素のみを選択します。

例:

.parent > .child {
  /* スタイル */
}

この例では、.parent要素の直下にある.child要素のみスタイルが適用されます。

子孫セレクタ

.parent .child {
  /* スタイル */
}

::nth-child() 疑似クラス

説明: 親要素の子要素の中で、特定の位置にある要素を選択します。

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

:not() 疑似クラス

説明: 指定された条件に合致しない要素を選択します。

.parent .child:not(.hidden) {
  /* スタイル */
}

::deep() 疑似クラス

説明: シャドーDOMを含めて、子孫要素全てを選択します。

.parent ::deep(.child) {
  /* スタイル */
}

JavaScript

説明: JavaScriptを使用して、子孫要素を全て選択することができます。

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

// 子孫要素全てにスタイルを適用
for (const child of children) {
  child.style.color = 'red';
}

使い分け

シンプルな構造の場合、> 隣接セレクタや子孫セレクタで十分です。
複雑な構造の場合、::nth-child() 疑似クラスや:not() 疑似クラスを使うと、より柔軟に要素を選択できます。
シャドーDOM内の要素を選択する場合は、::deep() 疑似クラスを使う必要があります。
JavaScriptを使うと、より複雑な処理を行うことができます。

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS 子孫要素選択</title>
</head>
<body>
  <div class="parent">
    <div class="child">子要素1</div>
    <div class="child hidden">子要素2</div>
    <div class="child">子要素3</div>
  </div>
  
  <style>
    /* `>` 隣接セレクタ */
    .parent > .child {
      color: red;
    }
    
    /* ` ` 子孫セレクタ */
    .parent .child {
      font-size: 16px;
    }
    
    /* `::nth-child()` 疑似クラス */
    .parent .child:nth-child(2) {
      background-color: yellow;
    }
    
    /* `:not()` 疑似クラス */
    .parent .child:not(.hidden) {
      border: 1px solid black;
    }
    
    /* `::deep()` 疑似クラス */
    .parent ::deep(.child) {
      margin: 10px;
    }
  </style>
</body>
</html>

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

子要素1、子要素3は赤色で表示されます。
子要素1、子要素2、子要素3はフォントサイズが16pxになります。
子要素2は黄色で背景塗りつぶされます。
子要素1、子要素2、子要素3はそれぞれ10pxのマージンが表示されます。

注意事項

::deep() 疑似クラスは、すべてのブラウザでサポートされているわけではありません。

CSSで子孫要素を全て選択するその他の方法

:is() 擬似クラス

説明: 複数のセレクタを組み合わせて、要素を選択することができます。

.parent .child:is(.child1, .child2) {
  /* スタイル */
}

:where() 擬似クラス

.parent .child:where(not(.hidden)) {
  /* スタイル */
}

Sass/SCSS

説明: CSSの拡張言語であるSass/SCSSを使うと、より簡単に子孫要素を選択することができます。

.parent {
  @each $child in .child1, .child2 {
    #{$child} {
      /* スタイル */
    }
  }
}

css css-selectors