:has() في CSS: سبع استخدامات بتشيل جافاسكريبت من موقعك:has() in CSS: seven uses that remove JavaScript from your site

:has() in CSS is a selector that picks an element based on what is inside it or what follows it. .card:has(img) means “the card that contains an image”. It is what developers called the “parent selector” and asked for over many years. It has been supported in all major browsers since late 2023, and it removes a lot of JavaScript that existed only to add a class to a parent.

How it works

CSS always went one way: parent to child. You could say “the image inside the card” but not “the card that has an image”. :has() flips that:

/* the card that contains an image */
.card:has(img) { padding-top: 0; }

/* the card without an image */
.card:not(:has(img)) { border-top: 4px solid #416EDD; }

/* a heading directly followed by a paragraph */
h2:has(+ p) { margin-bottom: 8px; }

Inside the brackets goes a normal selector, which may start with > for a direct child or + for the next sibling.

1. The form field with an error

.field:has(input:user-invalid) {
  border-color: #B47D68;
}

.field:has(input:user-invalid) .field__error {
  display: block;
}

.field:has(input:required) .field__label::after {
  content: " *";
}

The whole wrapper is coloured and the message shows, without a line of JavaScript. :user-invalid is better than :invalid here because it only applies after the user has interacted with the field, so the form does not open all red.

2. A dimmed submit button until the form is valid

form:has(:invalid) button[type="submit"] {
  opacity: 0.5;
}

This is a visual hint only. Do not actually disable the button with it, because the user must be able to press and see what is missing. Real validation always happens on the server.

3. Locking page scroll while an overlay is open

html:has(dialog[open]),
html:has(.menu.is-open) {
  overflow: hidden;
}

This was one of the most common reasons to write JavaScript: add a class to body when the menu opens and remove it on close. Now CSS sees the state itself. It pairs well with the dialog element, explained in the HTML dialog element.

4. A card that changes with its content

.card:has(.card__badge) { border-color: #416EDD; }

.card:has(> video) { aspect-ratio: 16 / 9; }

/* when the whole card is one link */
.card:has(a:focus-visible) { outline: 3px solid #416EDD; }

An editor adds a badge or a video in the admin, and the card adapts by itself. No classes like .card--has-video that someone must remember to add.

5. A grid that adapts to the number of items

/* a single item: take the full width */
.grid:has(> :only-child) { grid-template-columns: 1fr; }

/* four or more: a tighter grid */
.grid:has(> :nth-child(4)) {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

:has(> :nth-child(4)) means “there is a fourth child”, so at least four. A small trick that saves counting elements in JavaScript.

6. Dimming the rest when one is hovered

.list:has(.item:hover) .item:not(:hover) {
  opacity: 0.45;
}

.item { transition: opacity 0.25s; }

When the pointer rests on one item, the others fade. A simple effect that focuses the eye, in three lines.

7. A theme switch without JavaScript

html:has(#dark:checked) {
  --bg: #221E2C;
  --text: #F3E5DA;
}

body { background: var(--bg); color: var(--text); }

A checkbox anywhere on the page changes variables on the root. It works, but the choice is not saved after the page closes. Saving it still needs two lines of JavaScript. Full details in dark mode with CSS variables.

Performance

:has() costs more than ordinary selectors, because the browser must re-check when anything inside the element changes. In normal use the difference is not noticeable. Just watch for:

• Anchor it to a specific element. .card:has(img) beats *:has(img) or div:has(img).
• Keep the inside simple too. :has(> img) is cheaper than :has(img) because it looks at direct children only.
• Use html:has(...) and body:has(...) sparingly. They make the browser watch the whole page. A few such rules are fine, hundreds are not.
• No :has() inside :has(). The specification forbids that nesting.

Browser support

Supported in Chrome, Edge, Safari and Firefox since December 2023. If you must support older browsers, use it for enhancements, not essentials:

@supports selector(:has(*)) {
  form:has(:invalid) button { opacity: 0.5; }
}

One thing to watch: if you write :has() in a selector list with others and the browser does not understand it, the whole rule is dropped. Keep it in its own rule.

Before writing JavaScript that adds a class to a parent, ask: can :has() do it?

This is one of the newer CSS features that changed how we write styles. Continue with container queries and scroll-driven animations. And if you need a site with care in the details, talk to me.