• 【CSSプロパティ】:has()疑似クラスを使ってみました！

【CSSプロパティ】:has()疑似クラスを使ってみました！

  • 2023.10.27
  • CSS

いつのまにか導入されている、新しいCSSプロパティやセレクタ。
たまには情報を仕入れておかないと「こんな便利な方法があったんかい！」という打撃を浴びることになります…
さて今回紹介しますのは、疑似クラス「:has()」です。

目次

特定の要素を含んでいるものに対する指定

/* 例：画像を含んだdiv要素に対する指定 */
div:has(img) {
 ****
}

/* 例：spanが含まれるpタグを指定 */
p:has(> span) {
 ****
}

親子要素だけでなく様々なパターンで使用可能です

/* 直後にpがあるh3に対する指定 */
.box h3:has(+ p) {
 ***
}

/* 要素の状態も含めて指定 */
.input_box:has(input:focused) {
 background-color: snow;
}

/* 「:not()」との組み合わせも可能 */
.box:not(:has(.box_image)) {
 ***
}

サンプル

See the Pen CSS :has() 疑似クラスデモ by BST株式会社 (@BST-web) on CodePen.

お問い合わせはお気軽にBSTへ！

無料WordPressテーマ