今までも親要素にスタイルを当てたいときはありましたが、親要素にclassを指定するかJSでclass付与したりしていました。
それが疑似クラス:has()によって、特定の要素やid・classなどを含む親要素を指定できるようになりました。
:has()
See the Pen
Untitled by kushi (@kushi95)
on CodePen.
②のように子要素のクラスを参照して、それを含む親要素を指定したり、③のように画像を含む親要素を指定したりできます。
かなり便利だと思います。自動でタグが出力されクラスがつけられないときなどに重宝します。
親要素以外の使い方も
See the Pen
:has()02 by kushi (@kushi95)
on CodePen.
④のように直後に特定のタグなどが続く要素を指定したり、⑤のように特定の状態を判定したりもできます。
この場合はホバーしているかどうかをチェックしますが、:focusedや:visitedなど他の疑似クラスでも使えます。
要注意！Firefoxでは未対応
See the Pen
:has()03 by kushi (@kushi95)
on CodePen.
li:has(img)を使って画像を含むliタグにマージンをもたせました。
しかし、これだと:has()未対応のFirefoxでは反映されず②のようになります。
そこで③のようにしてみます。
まず:has()未対応ブラウザ用に画像自体にマージンを付けます。
そして:has()対応ブラウザ用には、li:has(img)で画像を含むliタグにマージンをもたせ、その子要素の画像のマージンを消すことで先ほど付けた未対応ブラウザ用の画像のマージンを打ち消しました。
他にもっと良い方法があるかもしれませんが、解決策の一つとして困ったときはご活用ください。
未対応ブラウザのことも考えないといけませんが、:has()自体は大変便利なので使いこなしていきたいですね！