Two things bother everyone who maintains Waypoint’s card CSS. The card’s rules are scattered: the base rule here, the hover state twenty lines down, the dark-mode override in another file. And the design team keeps asking for styles that depend on what’s inside the card (“if a session is sold out, dim it”), which used to mean a JavaScript class toggle.
\nNative nesting fixes the first, and :has() fixes the second.
You can now nest rules inside rules, in plain CSS, with no build step:
\n.session-card {\n padding: 1rem;\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n\n h2 {\n margin-block: 0 0.5rem;\n font-size: 1.125rem;\n }\n\n &:hover {\n border-color: #a78bfa;\n }\n\n .featured & {\n border-width: 2px;\n }\n\n @media (width >= 48rem) {\n padding: 1.5rem;\n }\n}& stands for the parent selector. &:hover means “this card when hovered”, and .featured & means “this card inside .featured”. A nested selector without &, like h2, is treated as a descendant: .session-card h2. Nested @media and @container rules apply to the parent selector, so the padding change lives next to the padding.
Nested selectors can start with an element name (h2, not & h2). Early implementations required a symbol first; every current browser now supports the relaxed syntax, and nesting has been Baseline since December 2023 (widely available since mid-2026).
Two more rules keep nesting healthy. Under the hood, & behaves like :is() wrapped around the parent list, so #keynote, .session-card { h2 { … } } gives every nested h2 rule ID-level specificity. And stop at two levels deep: a selector you can’t read in one glance is one you can’t override in one glance.
:has(): style an element by what it contains:has() takes a relative selector and matches the element if that selector finds something:
/* A card that contains a speaker photo gets a two-column layout */\n.session-card:has(img) {\n display: grid;\n grid-template-columns: 64px 1fr;\n gap: 1rem;\n}\n\n/* Dim sold-out sessions */\n.session-card:has(.badge-full) {\n opacity: 0.6;\n}\n\n/* A label whose following input is invalid after the user typed */\nlabel:has(+ input:user-invalid) {\n color: #b91c1c;\n}The last example shows that :has() is more than a “parent selector”: + input looks at the next sibling, so an earlier element can react to a later one. :user-invalid is the polite cousin of :invalid; it only matches after the user has interacted with the field, so an empty form doesn’t load covered in red.
:has() has two limits worth knowing before you hit them. You can’t nest a :has() inside another :has(), and you can’t put pseudo-elements such as ::before inside it. Its specificity follows the :is() rule from earlier in this section: the most specific argument counts, so .session-card:has(#keynote-badge) carries the weight of an ID.
Here’s where :has() changes how you build things. Waypoint’s filter bar is a set of checkboxes. Because the checkboxes and the cards share an ancestor, .schedule, the state of a checkbox can drive the cards:
<section class=\"schedule\">\n <div class=\"filters\">\n <label><input type=\"checkbox\" id=\"hide-full\"> Hide sold-out</label>\n </div>\n <article class=\"session-card\">…<span class=\"badge-full\">Sold out</span></article>\n <article class=\"session-card\">…</article>\n</section>.schedule:has(#hide-full:checked) .session-card:has(.badge-full) {\n display: none;\n}Read it right to left: hide a card that contains a sold-out badge, when it’s inside a schedule that contains a checked #hide-full box. The browser re-evaluates it the moment the checkbox changes.
:has() gets the attention, but a few quieter selectors earn their place on the Waypoint page too:
/* Highlight the whole filter bar while any control inside it has focus */\n.filters:focus-within { outline: 2px solid #a78bfa; }\n\n/* Every card except sold-out and cancelled ones */\n.session-card:not(.is-full, .is-cancelled) { cursor: pointer; }\n\n/* Stripe only the visible cards, skipping hidden ones */\n.session-card:nth-child(even of :not([hidden])) { background: #f9fafb; }:focus-within matches an element when it or anything inside it has focus. :not() accepts a whole list, so you no longer chain :not(.a):not(.b). And the of S form of :nth-child() counts only siblings that match S, which fixes zebra stripes that break the moment a filter hides a row. All three work in every current browser.
In the exercise you’ll rewrite the card styles with nesting, then add two :has() rules: one that hides sold-out sessions when the filter box is checked, and one that highlights a card when its “save” checkbox is ticked. That completes the cascade section; next you’ll move from which styles apply to where things go, starting with flexbox.
& stands for the parent selector.","A nested selector gets the specificity of :is() applied to the parent list, so a parent list containing an ID makes every nested rule ID-heavy.","CSS nesting doesn’t concatenate strings the way Sass does, so &__title will never produce .card__title.",":has() matches an element when the relative selector inside it matches, which lets a parent, or an earlier sibling, react to its descendants or later siblings."],"further":[{"title":"Using CSS nesting (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting/Using"},{"title":":has() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:has"},{"title":"Nesting (web.dev Learn CSS)","url":"https://web.dev/learn/css/nesting"}],"quiz":[{"q":"What selector does this nested rule produce?
\n.session-card {\n .speaker & { padding: 0; }\n}.session-card .speaker","why":"That’s what you’d get without the &, or with & .speaker. Here & comes last, so the card is the descendant."},{"text":".speaker .session-card","why":"Correct. & marks where the parent selector goes; putting it last means a session card inside a .speaker."},{"text":".session-card.speaker","why":"That needs &.speaker with no space between them."},{"text":"It’s invalid, because & must come first.","why":"& can appear anywhere in a nested selector, including at the end."}],"answer":1},{"q":"Which selector styles a session card only when it contains an image?
","options":[{"text":".session-card img","why":"That selects the image itself, not the card."},{"text":".session-card > img:parent","why":"There’s no :parent pseudo-class in CSS; :has() is how you select based on descendants."},{"text":".session-card:has(img)","why":"Correct. The card matches when the relative selector img finds a descendant."}],"answer":2},{"q":"Which rule hides every non-design card when the #only-design checkbox inside .schedule is checked?
.schedule:has(#only-design:checked) .session-card:not(.track-design) { display: none; }","why":"Correct. :has() turns the checkbox state into a condition on the shared ancestor, and the rest of the selector targets the cards."},{"text":"#only-design:checked .session-card:not(.track-design) { display: none; }","why":"That looks for cards inside the checkbox, and inputs can’t have children."},{"text":"#only-design:checked + .session-card:not(.track-design) { display: none; }","why":"The + combinator only reaches the single sibling directly after the checkbox, not cards elsewhere in the schedule."}],"answer":0},{"q":"You write .card { &__title { font-weight: 700; } } out of Sass habit. What happens?
card__title.","why":"Native nesting doesn’t do string concatenation; & stands for a selector, not text to glue onto."},{"text":"It doesn’t style .card__title; the nested selector doesn’t mean what Sass means.","why":"Correct. To style a BEM element with native nesting you write the full class, for example .card__title at the top level."},{"text":"The browser stops parsing the rest of the stylesheet.","why":"CSS error handling drops what it can’t use and keeps going; it never abandons the stylesheet."}],"answer":1}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"Three jobs, all in CSS:
\n.session-card rules (base, h2, :hover) as one nested rule on .session-card.#hide-full checkbox is checked, hide (display: none) every .session-card that contains a .badge-full..save checkbox is checked, give that card a #6d28d9 border color.Don’t add JavaScript or change the HTML.
\n","hints":["Inside the.session-card rule, h2 { … } and &:hover { … } replace the separate rules.","For the filter, start from the ancestor that contains both the checkbox and the cards: .schedule:has(#hide-full:checked).",".schedule:has(#hide-full:checked) .session-card:has(.badge-full) { display: none; } and, nested in the card, &:has(.save:checked) { border-color: #6d28d9; }."],"explanation":"Nesting keeps every state of the card in one block: h2 becomes a descendant rule and &:hover attaches the pseudo-class to the card itself. The filter works because .schedule contains both the checkbox and the cards: :has(#hide-full:checked) turns the checkbox state into a condition on that shared ancestor, and .session-card:has(.badge-full) picks out sold-out cards. The save highlight is the same idea one level down: the card matches :has(.save:checked) as soon as its own checkbox is ticked, and the browser re-evaluates both rules on every change, with no JavaScript.