【HTML,CSS】疑似クラス :has() が結構便利！？ | GUARDIAN Creative BLOG | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー

「:has()疑似クラス」は、指定した要素がある場合にのみスタイルを適用できるCSSです。

今回は主な使い方は下記の2つです！

1,特定の要素がセレクタ内にあるかどうか判別する

2,特定の要素がある要素の後に続いているかどうか判別する

1つずつ紹介していきます！

例えばこの画像のように、「画像ありのコンテンツ」と「画像なしのコンテンツ」の2つのコンテンツがあります。

その時に星はこう思いました。

「画像ありのコンテンツの画像とテキストを横並びにしたい！」と

そこでこのhas()を使ってみましょう！

以下の記述を付け加えてみます！

.contents:has(.contents_image) {
display: flex;
align-items: center;
gap: 2rem;
}

↑これは「contents」の要素の中の「contents_image」があるものにのみに、スタイルを効かせます。

「contents」の要素の中に「contents_image」が無い場合はこのスタイルは効かないということですね。

そうするとこのようになります！

「画像ありのコンテンツ」の方にのみにスタイルが適用されました！

「1,特定の要素がセレクタ内にあるかどうか判別する」はこのように使うと良いでしょう！

上の画像のように画像なしコンテンツの方のh2タグの後にPタグを追加しました。

h2要素の後にPタグのある方にのみスタイルを適用させることが出来ます！

以下の記述を追加します。

h2:has(+ p) {
color: red;
}

↑これはPタグが後に存在するh2のみに対して、文字色を赤色にするというCSSの記述です！

反映するとどうなるでしょうか！？

このようにPタグが後にあるh2にのみ、適用されましたね！

「2,特定の要素がある要素の後に続いているかどうか判別する」はこのように使えます！

いかがでしたでしょうか？

今回はCSSの「has()」について書いてみました！

has()を使うと、より柔軟にスタイルが適用できるのでぜひ使ってみてください！！

最後までご覧いただき、ありがとうございました！！ 定期的に発信できたらと思います！