A new way to select a parent element in CSS based on its children.
:has()
は、「中に◯◯がある要素を選びたい!」というときに使える特別なCSSの書き方です。
たとえば、ある<div>
の中にボタン(<button>
)があるかどうかで、<div>
に特別なデザインをつけたいときがあります。そんなときに使うのが:has()
です。
CSS
div:has(button) {
background-color: lightblue;
}
この例では、「中に<button>
がある<div>
」だけが、水色の背景になります。JavaScriptを使わなくても、「条件を満たした親要素だけをCSSで選べる」点がとても画期的です。
従来のCSSでは、「子要素や中身に応じて、親要素を変える」ことはできませんでしたが、:has()
を使えばそれが可能になります。
ただし、一部の古いブラウザでは使えないことがあるので、実際に使う前にブラウザ対応状況を確認することが大切です。