← All Tools

CSS :has() Selector Playground

The long-awaited parent selector. Type any :has() expression and see exactly which elements in your HTML it matches, with the rendered preview, browser-support notes, and the generated CSS rule.

Selector

0 matches copy generated CSS

HTML

Live preview — matched elements highlighted.

Generated CSS







  
Specificity

  

    Per CSS Selectors 4, :has(X) takes its specificity from the most specific selector inside the argument — the parentheses themselves add nothing. So div:has(.a) = div.a = 0/1/1, while div:has(#x) jumps to 0/1/0/1.
  

  

    
id0

    
class0

    
element0

    
total0,0,0

  






  
About :has()

  

    :has(S) matches any element that has at least one descendant matching S. Combine with combinators in the argument for siblings: h2:has(+ p), li:has(~ .active). It's not allowed inside another :has() (no nesting), and pseudo-elements like ::before aren't valid inside the argument. Shipped in Safari 15.4 (2022), Chrome 105 / Edge 105 (Aug 2022), Firefox 121 (Dec 2023) — usable today without a polyfill on every evergreen browser. Use @supports selector(:has(*)) if you need a fallback path.