`:has()` in depth: visual logic without JavaScript

Master `:has()` so you can style parents and relationships between elements, with practical patterns for forms, cards and interface states.

How much do you know about CSS?

📘 Theory

The right mental model

Think of `:has()` as a boolean condition applied to the current element.

In `.card:has(img)`, you are not selecting the image. You are selecting the card if it contains an image. That changes the way CSS can reason about structure, because now the container can react to what happens inside it.

In forms, `:has()` enables broader state rules such as `form:has(:invalid)` or `.field:has(input:focus)`. The result is less JavaScript and fewer temporary state classes.

Select parents based on content or internal state.
Build visual feedback without depending on JavaScript events.
Reduce helper classes and keep HTML cleaner.

Real patterns with `:has()`

Three recurring patterns you will actually use in product work.

Pattern 1: enriched cards. If a card contains media, increase its visual priority or change its layout.

Pattern 2: active field wrappers. The field container reacts to the focused input and makes interaction more obvious.

Pattern 3: invalid forms. The submit button reflects the global form state and discourages premature submission.

Good practices

Avoid unreadable chains such as `:has(:not(...):is(...))` when they do not add real value. Prefer rules that remain obvious at the component level.

Limit the scope of the selector: `.checkout-form:has(:invalid)` is usually better than a broad global rule on every `form`.

When the condition is business-critical, document the intent with a short comment so the rule stays understandable over time.

1 The right mental model 2 Real patterns with `:has()` 3 Good practices

🧪 Learn by doing

Example Interactive demo: contextual form The field wrapper changes when there is focus or an invalid state.

⌄

🏁 Challenges

Challenge Challenge: conditional card styling Highlight `.card` only if it contains an image.

⌄

🧰 Resources

Useful links

MDN - `:has()`

Test

Check your knowledge with a test about CSS.

Test for CSS

Course resources 78

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 54

Functional selectors: `:is()`, `:where()`, `:not()` and combined patterns

Lesson 56

The input hack in CSS: toggles and menus without JavaScript

›