Selector

Selector comparisons

5 old vs modern selector CSS techniques, side by side.

Scroll spy without IntersectionObserver

Modern nav a:target-current {
color: var(--accent);
}

Old const observer = new
IntersectionObserver(cb);
/* 15+ lines of JS */

hover to see old →

Low-specificity resets without complicated selectors

Modern :where(ul, ol) {
margin: 0;
padding-inline-start: 1.5rem;
}

Old .reset ul, .reset ol { ... }
/* or (0,0,1) specificity, still wins */

hover to see old →

Grouping selectors without repetition

Modern .card :is(h1, h2, h3, h4) {
margin-bottom: 0.5em;
}

Old .card h1, .card h2, .card h3, .card h4 {
margin-bottom: 0.5em;
}

hover to see old →

Focus styles without annoying mouse users

Modern :focus-visible {
outline: 2px solid var(--focus-color);
}

Old :focus { outline: 2px solid blue; }
// Shows on mouse click too, or people remove it (a11y fail)

hover to see old →

Selecting parent elements without JavaScript

Modern .card:has(img) {
grid-template: auto 1fr;
}

Old // JavaScript required
el.closest('.parent')
.classList.add(…)

hover to see old →

Other categories

Layout 20 snippets Animation 8 snippets Color 5 snippets Typography 7 snippets Workflow 11 snippets