擬似クラス:has()を使ってみよう【CSS】

Contents

:has()とは

:has()とは、指定した要素を持つ要素を指定する擬似クラスになります。

これを使用すると、いままでJavaScriptを使用しないとできなかったことが、CSSのみで行えるようになります。

2022年10月現在は、Firefoxを除いてSafariやChromeなど、多くの主要Webブラウザでサポートされています。

:has()の記述方法は以下の通りになります。

指定の要素:has(持っている要素) {
指定したいスタイル
}

:has()擬似クラスには、CSSセレクタを使用し指定するので、使用する際はCSSセレクタについても確認しておきましょう。

【CSS初心者必見】よく使うcssセレクタ11選！

:has()でできることを抜粋して簡単に説明していきます。

/*  <img> を子に持つ <a> のみを選択	*/
a:has(> img){
width:50%;
}

/* 直後に <p> を持つ <div> を選択 */
div:has(+p){
font-weight:bold;
}

/* <img> にalt属性がない <article> を選択 */
article:has(img:not([alt])) {
}

/* .articleの中に.boxが含まれている場合 */
.article:has(.box){
margin:30px 0;
}

/* .articleの中に.boxが含まれていない場合 */
.article:not(:has(.box)){
margin:30px 0;
}

上記だけではなく他にも様々な指定の仕方がソースにあるので、使用する際はぜひ参考にしてみましょう。

このように様々な使い方があり、使い方によってはJavascriptやJQUERYを使うこと無く、CSSのみで複雑な指定をこなすことができます。

今回の:has()は、初心者向けではなく玄人向けなので、ある程度CSSを理解したうえで使用しましょう。