What are CSS :is(), :where(), and :has() selectors?
Answer
:is() is a forgiving selector list function: :is(h1, h2, h3) a matches links inside any heading without writing three separate rules. Its specificity equals the most specific selector in its argument. :where() works identically to :is() but its specificity is always zero — ideal for base/reset styles that should be easy to override. :has() is the long-awaited "parent selector": label:has(+ input:invalid) styles a label when the adjacent input is invalid. :has(img) matches containers that contain an image. It enables previously impossible CSS patterns that required JavaScript. :has() is now supported in all modern browsers (Chrome 105+, Safari 15.4+, Firefox 121+).
Previous
What is the difference between browser reflow and repaint?
Next
What is CSS containment and the contain property?