CSS :has() Selector

The Basic Syntax

/* Match any element that contains an img */
.card:has(img) {
    /* ... */
}

/* Match a form that contains an invalid input */
form:has(input:invalid) {
    border-color: red;
}

/* Match an article with an h2 immediately followed by a p */
article:has(h2 + p) {
    /* ... */
}

The pattern is: parent:has(descendant-selector). If the parent contains a matching descendant, the rule applies to the parent.

Form Validation Without JavaScript

The classic use case — style the form based on input state:

/* Red border when any input is invalid (and has been typed in) */
.field:has(input:invalid:not(:placeholder-shown)) {
    border-color: #ef4444;
}

/* Green border when all inputs are valid */
.field:has(input:valid):not(:has(input:invalid)) {
    border-color: #10b981;
}

/* Highlight the field when its input is focused */
.field:has(input:focus) {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

This is exactly what our live demo does. In most cases, you can replace an entire validation script with three lines of CSS.

Conditional Card Layouts

Style cards differently based on their content:

/* Cards with an image get a top-padding of 0 (for edge-to-edge image) */
.card:has(img) {
    padding-top: 0;
}

/* Cards without an image get a centered layout */
.card:not(:has(img)) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* Cards with a "new" badge get a highlighted border */
.card:has(.badge-new) {
    border: 2px solid #10b981;
}

Navigation and Layout Magic

Style parent containers based on active states:

/* Highlight the whole nav section if any link is active */
.nav-section:has(.nav-link.active) {
    background: #f59e0b;
}

/* Add a sidebar-adjacent margin only if a sidebar exists */
.main:has(.sidebar) {
    margin-left: 250px;
}

/* Style the whole layout when the user is logged in */
body:has(.user-avatar) .header {
    background: #1e40af;
}

Combining with :not() and Other Selectors

/* Items that have a subtitle but no description */
.item:has(h2):not(:has(p)) {
    /* ... */
}

/* Grid with more than 4 items gets a different layout */
.grid:has(> :nth-child(5)) {
    grid-template-columns: repeat(4, 1fr);
}

/* Match any element that has a hovered child */
.menu-item:has(:hover) {
    background: rgba(255, 255, 255, 0.1);
}

The :has(:nth-child(5)) pattern is powerful — it lets you change a layout based on how many children there are, all in CSS.