スタッフブログ

CSSで兄弟要素の前に装飾を適用する方法

2024年11月22日（金）

こんにちは。田村です。
今回は、CSSの:has() 擬似クラスを使って「兄弟要素の前に装飾を適用する方法」を解説します。

次のような見出しにアイコンを追加するクラスがあり、h1とh2でアイコンの色を変えたいが新たにクラス名を追加できないという場合がありました。

ですが、兄弟要素で指定しようとしてもh1側には装飾を追加できますが、手前のsvgには追加することができません。 .heading-icon > svg + h1

<div class="heading-icon">
<svg>...</svg>
<h1>見出し1</h1>
</div>

<div class="heading-icon">
<svg>...</svg>
<h1>見出し2</h1>
</div>

そこで:hasを使い、子要素にh1がある場合とすることで兄弟要素の前に対して装飾を当てることができます。

.heading-icon:has( svg + h1) svg {
  color: red;
}
.heading-icon:has( svg + h2) svg {
  color: black;
}

svg に限らず、任意の要素の前にある場合という条件にしたい場合は次のように、すると良いです。

.heading-icon:has(> h1) svg {
 color: red;
}

HTML&CSSコーダー

ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、
あなたのウェブサイトの制作を強力にサポートいたします。