Modern CSS

What "modern CSS" means

In recent years CSS gained features that used to require Sass or JavaScript. Everything below works today in all major browsers — worth using, not just knowing.

Nesting — nested rules, natively

.card {
  padding: 1rem;

  & h3 { font-weight: 600; }        /* .card h3 */
  &:hover { border-color: gray; }   /* .card:hover */
  .dark & { background: black; }    /* .dark .card */

  @media (min-width: 48rem) {
    padding: 2rem;
  }
}

& = the parent selector. Like in Sass, but without a build step. Don't nest more than 2–3 levels — specificity grows and the CSS becomes hard to read.

:has() — "the parent selector"

For the first time, you can style an element by what it contains or by what happens after it:

.card:has(img) { padding-top: 0; }                       /* cards with an image */
.field:has(input:invalid) label { color: var(--danger); } /* the label of an invalid field */
form:has(:focus-visible) { outline: 2px solid; }          /* the form that has focus */
body:has(dialog[open]) { overflow: hidden; }              /* lock scrolling while a modal is open */

Many things that used to need state in React (a class on the parent) are now solved with CSS alone.

:is() and :where() — selector lists

:is(h1, h2, h3):hover { color: var(--accent); }
:where(ul, ol) { padding-left: 1rem; }

Logical properties

Instead of left / right / top / bottom, you describe the direction relative to the text. The layout then works automatically in right-to-left languages too (Arabic, Hebrew).

Tailwind has them: ps-4, pe-4, ms-auto, px-4 = padding-inline.

@layer — the cascade order, made explicit

@layer reset, base, components, utilities;

@layer components {
  .btn { padding: 1rem; }
}

Layers declared later win, regardless of specificity — see The cascade. Tailwind v4 is built on them (theme, base, components, utilities).

Other useful features

Summary

• Native nesting with &; :has() styles by content; :where() = zero specificity.
• Logical properties (padding-inline, inset) instead of left / right.
• @layer controls the cascade; color-mix, oklch, text-wrap: balance for modern details.

Official sources

• MDN — CSS nesting
• MDN — :has()
• MDN — Logical properties
• MDN — @layer