:where and :has

Learn :where and :has pseudo-classes.

The :where pseudo-class

The :where() function groups the selector list inside it and behaves as a single selector. Its key trait is zero specificity contribution.

Write :where(h1, h2, h3) { color: navy; } and all three headings turn navy; but because specificity is zero, any class selector easily overrides it. This makes :where ideal for a safe base in a theme skeleton.

The :has pseudo-class

The :has() function looks at an element's content. If the element has a descendant matching the selector inside, the parent is matched. This is why it is also called the parent selector.

Write a:has(> img) and you select every a tag that directly contains an image. What used to require JavaScript is now a single line of CSS. It is perfect for styling image links.

Real use: the card parent

The power of :has is styling a parent based on its content. Add a border when a card holds an image, skip it otherwise — one line does it.

Write .card:has(img) { padding: 0; } and any card that contains an image gets zero padding; the image reaches the card's edges. This used to require JavaScript.

Exercise Make image links block-level

Write an a:has(> img) selector and add display: block inside. Links that directly contain an image will become block-level.

Show example solution

/* style image links */
a:has(> img) {
  display: block;
}

Test yourself

What color does the h1 get?
```
:where(h1, h2) {
  color: navy;
}
h1 {
  color: red;
}
```
- red — the h1 selector wins
- navy — :where takes effect
- The browser throws an error
- The color does not change
Show answer

red — the h1 selector wins — Correct. :where has zero specificity, so the plain h1 selector wins and the color is red.

Select a link that contains an image

a____ {
  display: block;
}

Show answer

a:has(img) {
  display: block;
}

Match each pseudo-class to its job

:where(h1, h2)

Zero-specificity grouping
:has(> img)

Parent holding an image
:where(.btn)

Easily overridden base
:has(.badge)

Element holding a badge

Next lesson: Summary - Breadcrumb menu

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies