The :has() pseudo-class matches an element when a relative selector inside the parentheses finds at least one match. Use it to style a parent from its children, or a previous sibling from what comes next.
Examples: .card:has(img) styles a card that contains an image; h1:has(+ p) styles an h1 only when the next sibling is a p.
Widely available across modern browsers since December 2023. Prefer progressive enhancement if you must support older engines.
:has().You cannot nest :has() inside :has(), and pseudo-elements are not valid arguments. Specificity follows the most specific selector in the argument list (like :not()).
:has( <relative-selector-list>)Relative selectors may start with a combinator such as >, +, or ~.
:has() takes a relative selector list — not property values. Common patterns:
| Pattern | Description | Try it |
|---|---|---|
:has(img) | Element that contains an img descendant | Try it |
:has(> .child) | Element with a matching direct child | Try it |
:has(+ p) | Element followed immediately by a p | Try it |
:has(a, b) | OR — matches if a or b is found | Try it |
:has(a):has(b) | AND — both conditions must match | Try it |
:not(:has(...)) | Style when the condition is missing | Try it |
:has()Anchor on the element you want to style, then describe what it must contain or be next to.
:has(...) with a relative selector for the condition.> or + when you want a tighter match.body or * for large pages.| Piece | Required? | Role |
|---|---|---|
| Anchor selector | Usually yes | The element that gets the styles |
| Relative selector list | Yes | Condition checked from that element |
Combinator (>, +, …) | No | Limits how far the condition looks |
| Valid argument | Yes | No nested :has(), no pseudo-elements |
Switch :has() patterns and watch which card or heading lights up.
Each snippet focuses on :has(). Use Try It Yourself for a live editor.
Highlight a section when it contains a featured article.
section:has(.featured) {
border: 2px solid #2563eb;
background: #eff6ff;
}section is the element you want to style.:has(.featured) checks for that descendant.section..featured stays normal.Tighten spacing after an h1 when an h2 follows immediately.
h1:has(+ h2) {
margin-bottom: 0.25rem;
}+. + h2 means the next sibling is an h2.h1, not the h2.h1 followed by a p does not match.Match if any listed condition is true.
.media:has(video, audio) {
outline: 2px solid #7c3aed;
}:has() mean any match is enough..media gets the outline when video or audio exists.:has(video):has(audio) instead.Most issues are nesting limits, broad anchors, or confusing OR vs AND.
:has() inside :has()Nested :has() is invalid. Rewrite the condition with combinators or chained :has() on the same anchor.
::before, ::after, and similar are not valid arguments for :has().
Prefer a specific container over body:has(...), :root:has(...), or *:has(...) on large pages.
:has(a, b) matches either. :has(a):has(b) requires both.
:has() is a browser CSS pseudo-class. Node.js, Deno, and Bun do not evaluate it.
Chrome 105+, Edge 105+, Safari 15.4+, Firefox 121+, Opera 91+, Samsung Internet 20+ (widely available since Dec 2023).
Bottom line: Safe for modern sites. Use progressive enhancement for older browsers. Not a server runtime API.
anchor:has(relative-selector):has() = AND.> or +.One line: A:has(B) styles A when relative selector B matches from A.
Style an element while the pointer is over it.
8 people found this page helpful