Skip to main content

CSS :has() Is the Missing Selector

The :has() pseudo-class lets you style an element based on its descendants. article:has(img) targets articles that contain an image. label:has(input:checked) styles a label when it…

April 27, 2026 JavaScript chris 1 min read Design Systems

Article takeaway

The :has() pseudo-class lets you style an element based on its descendants. article:has(img) targets articles that contain an image. label:has(input:checked) styles a label when it…

The :has() pseudo-class lets you style an element based on its descendants. article:has(img) targets articles that contain an image. label:has(input:checked) styles a label when its child checkbox is ticked.

Browser support landed across Chrome, Safari, and Firefox in 2023. It removes many cases where you would have reached for a JavaScript class toggle.

It is a powerful selector — use it sparingly in performance-critical selectors. Browsers optimise it well, but a massive query selector with deeply nested :has() can still cost layout time.

Share X / Twitter LinkedIn

Leave a comment

Related Posts