Modern Selectors & Native Nesting

:is(), :where() and :has()

:is() groups selectors, :where() does the same with zero specificity, and :has() selects a parent based on its children.

:is(h1, h2, h3) a { text-decoration: none; }
:where(.btn, .link) { color: inherit; }        /* specificity 0 */

/* cards that contain an image */
.card:has(img) { padding-top: 0; }
/* a label whose input is invalid */
label:has(+ input:invalid) { color: crimson; }

Native nesting

CSS now supports nested rules without Sass. Use & to refer to the parent.

.card {
  padding: 16px;
  & h3 { margin: 0; }
  &:hover { box-shadow: 0 4px 12px rgb(0 0 0 / 0.15); }
  @media (min-width: 768px) { padding: 24px; }
}

Keep nesting to two or three levels so specificity and readability stay under control.

Quick check

Quick check: Which selector picks a parent based on its children?

• :has()
• :is()
• :where()
• :root