No Login Data Private Local Save

CSS :has() Selector Playground - Online Test Parent Styling

24
0
0
0

CSS :has() Selector Playground

Online test lab for the powerful :has() relational pseudo‑class. Write HTML & CSS, instantly see how child states can style their parent.

HTML Editor
CSS Editor
Live Preview (sandboxed)

Frequently Asked Questions

:has() is a relational pseudo‑class that represents an element if any of the relative selectors passed as argument match at least one element when anchored against this element. It lets you style a parent based on its children or descendants, e.g., div:has(> img).

Unlike traditional CSS parent selectors that work upward, :has() works by matching the parent if it contains a child that matches the inner selector. Example: .card:has(button:hover) { border-color: blue; }.

:has() is supported in all modern browsers including Chrome 105+, Edge 105+, Safari 15.4+, and Firefox 121+. As of 2024 it is safe to use in production for most projects.

Yes, you can chain :has() with class, attribute, or pseudo‑class selectors. For example, form:has(input:invalid) .error-message { display: block; }.

Generally :has() is performant for most use cases, but overly broad selectors like *:has(*) can be expensive. Stick to reasonable, scoped selectors and test in DevTools.

Write .form-group:has(input:focus) { background: #f0f8ff; }. The container gets a highlight whenever the inner input is focused.
🔧 Related Tools