CSSの :has() 疑似クラスで親要素のスタイルを変化させる

CSSで親要素にスタイルを適用する方法

直接子セレクタ

親要素の直後に存在する子要素のみを対象にスタイルを適用できます。

例：

div > p {
  color: red;
}

このコードは、div 要素の直下にある p 要素のみを赤色で表示します。

隣接兄弟セレクタ

div + p {
  color: blue;
}

一般兄弟セレクタ

div ~ p {
  color: green;
}

子孫セレクタ

div p {
  color: yellow;
}

:has() 疑似クラス

div:has(p) {
  color: orange;
}

このコードは、p 要素を持つ div 要素のみをオレンジ色で表示します。

注意点

• 上記の方法は、いずれも親要素と子要素の間に親子関係が存在する必要があります。
• 複数の方法を組み合わせて使用することもできます。
• 複雑なセレクタは、コードの可読性を低下させる可能性があるため、注意が必要です。

CSSで親要素にスタイルを適用するには、いくつかの方法があります。 それぞれの方法の特徴を理解し、目的に合った方法を選択することが重要です。

HTML

<div>
  <h1>親要素</h1>
  <p>子要素1</p>
  <p>子要素2</p>
  <div>
    <h2>孫要素</h2>
    <p>孫要素1</p>
  </div>
</div>

CSS

/* 直接子セレクタ */
div > p {
  color: red;
}

/* 隣接兄弟セレクタ */
div + p {
  color: blue;
}

/* 一般兄弟セレクタ */
div ~ p {
  color: green;
}

/* 子孫セレクタ */
div p {
  color: yellow;
}

/* :has() 疑似クラス */
div:has(p) {
  color: orange;
}

/* 孫要素 */
div div p {
  color: purple;
}

結果

• 親要素の h1 要素は、デフォルトの色で表示されます。
• 親要素の直下にある p 要素は、赤色で表示されます。

上記以外にも、CSS で親要素にスタイルを適用する方法があります。 詳細については、以下の参考資料を参照してください。

CSSで親要素にスタイルを適用するその他の方法

隣接要素セレクタは、特定の要素の隣に存在する要素を選択するセレクタです。

p + h2 {
  color: red;
}

nth-child() 疑似クラスは、親要素の子要素の順番に基づいてスタイルを適用する疑似クラスです。

div:nth-child(2) {
  color: blue;
}

:not() 疑似クラスは、指定された条件に合致しない要素を選択する疑似クラスです。

div:not(:first-child) {
  color: green;
}

:last-child 疑似クラスは、親要素の最後の子要素を選択する疑似クラスです。

div:last-child {
  color: yellow;
}

div:only-child {
  color: orange;
}

属性セレクタは、要素の属性に基づいてスタイルを適用するセレクタです。

div[class="parent"] {
  color: red;
}

このコードは、class 属性が "parent" である div 要素のみを赤色で表示します。

:hover 疑似クラスは、要素にマウスポインタが乗ったときにスタイルを適用する疑似クラスです。

div:hover {
  color: blue;
}

このコードは、div 要素にマウスポインタが乗ったときに、その要素を青色で表示します。

div:active {
  color: green;
}