2023年から使っていきたいCSS 〜疑似クラス :has() 〜

こんにちは、森田です。 2023年初記事です。明けましておめでとうございます。 本年も Gaji-Labo よろしくお願いいたします。 さて、年も変わったことですし本年からなにか新しいことを始めたいと思います。 今年は疑似クラス :has() を使えたらいいなと願っております🙏 疑似クラス :has() とは /* img要素を含んでいるa要素を指定 */ a:has(> img) { style } /* p要素が隣接しているh1要素を指定 */ h1:has(+ p) 擬似クラス :has() は、その名のとおり引数の中で指定したセレクタを含んでいる要素を指定します。 今までになかった親要素を指定できるセレクタとなりCSSで出来ることが格段に増えそうです。 このような場合、今までは JS でクラス付与などをしていたのでそれが CSS のみで実現できるのは素晴らしいです。 仕様:has