More than 1 year has passed since last update.

子要素への一括スタイリング

Last updated at 2023-11-19Posted at 2023-11-19

CSSセレクタ「.test > *」は、クラス名が .test である要素の直下に存在する全ての子要素にスタイルを一括で適用します。

・.test クラスに直接子要素として配置されているものに対象が限定される
・.test クラスの直下にある p、div、span などの子要素全てにスタイルが適用される
・.test クラスの直下にある子要素のみが対象。ネストされた要素は影響を受けない

同じスタイルを複数の子要素に適用したい場合、このセレクタを使用することで冗長なコードを避けられます。

HTMLの例

index.html

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

CSSの例

style.css

.test > * {
  border: 1px solid #333;
  margin: 5px;
  padding: 10px;
}