CSS

A new way to select a parent element in CSS based on its children.

:has()

:has()は、「中に◯◯がある要素を選びたい！」というときに使える特別なCSSの書き方です。

たとえば、ある<div>の中にボタン（<button>）があるかどうかで、<div>に特別なデザインをつけたいときがあります。そんなときに使うのが:has()です。

CSS

div:has(button) {
	background-color: lightblue;
}

この例では、「中に<button>がある<div>」だけが、水色の背景になります。JavaScriptを使わなくても、「条件を満たした親要素だけをCSSで選べる」点がとても画期的です。

従来のCSSでは、「子要素や中身に応じて、親要素を変える」ことはできませんでしたが、:has()を使えばそれが可能になります。

ただし、一部の古いブラウザでは使えないことがあるので、実際に使う前にブラウザ対応状況を確認することが大切です。