CSS3

article p {
  /* descendant, any depth */
}
article > p {
  /* direct child only */
}
h2 ~ p {
  /* any following sibling */
}
h2 + p {
  /* immediately following sibling */
}

p:not(.lede) {
}
:is(h1, h2, h3) {
  /* matches any listed selector */
}
:where(h1, h2, h3) {
  /* same as :is, but contributes 0 specificity */
}
form:has(:invalid) {
  /* the relational pseudo-class — matches an ancestor whose descendant matches */
}
h2:has(+ p) {
  /* also matches by what comes AFTER — not just descendants */
}

[data-state='open'] {
}
[href^='https://'] {
} /* starts with */
[href$='.pdf'] {
} /* ends with */
[class*='card-'] {
} /* contains */

li:nth-child(odd) {
}
li:nth-child(3n + 1) {
}
p:first-of-type {
}
p:last-child {
}

Specificity, low to high: type selectors (p) → class/attribute/pseudo-class (.card, [href], :hover) → ID (#nav). An element’s own inline style attribute beats all three. !important isn’t a specificity level at all — it’s a separate importance flag that overrides normal cascade order before specificity is even consulted.

*,
*::before,
*::after {
  box-sizing: border-box; /* width/height include padding + border */
}

.card {
  width: 320px;
  padding: 1.5rem;
  border: 1px solid var(--border);
  margin-block: 1rem; /* logical property: top+bottom, regardless of writing direction */
}

With border-box, .card’s rendered width stays 320px regardless of padding/border — the default content-box would add them on top. ::before/::after need including explicitly — they don’t inherit box-sizing from the wildcard on their own.

.tooltip-anchor {
  position: relative; /* establishes containing block for children */
}
.tooltip {
  position: absolute; /* positioned relative to nearest positioned ancestor */
  top: 100%;
  left: 0;
}
.site-header {
  position: sticky; /* scrolls normally, then sticks */
  top: 0;
  z-index: 10;
}
.modal-overlay {
  position: fixed; /* positioned relative to the viewport */
  inset: 0;
}

fixed’s containing block is normally the viewport — but any ancestor with transform, filter, backdrop-filter, perspective, will-change or contain becomes the containing block instead, which is a common source of “why won’t my fixed element stay put” bugs.

body {
  font-family: 'Inter Variable', Inter, system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

h1 {
  font-family: 'Space Grotesk Variable', 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 1.4rem + 2vw, 3rem);
}

code {
  font-family: 'JetBrains Mono Variable', ui-monospace, monospace;
}

The generic family at the end of font-family is the fallback if none of the named fonts are available — never omit it.

h1 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.single-line-truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.multi-line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card {
  color: rgb(23 23 31);
  background: hsl(258 60% 96%);
  border-color: rgb(0 0 0 / 0.1);
}

.accent {
  background: oklch(65% 0.18 290);
}

.hover-tint {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.icon {
  fill: currentColor;
}

.hero {
  background: linear-gradient(135deg, #a78bfa 0%, #7c9cf5 45%, #38e0e0 100%);
}

.spotlight {
  background: radial-gradient(circle at top, rgb(167 139 250 / 0.2), transparent 70%);
}

.photo {
  background-image: url('photo.jpg');
  background-size: cover;
  background-position: center;
}

.gradient-text {
  background: linear-gradient(90deg, #a78bfa, #38e0e0);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* container properties */
.row {
  display: flex;
  flex-direction: row; /* row | row-reverse | column | column-reverse */
  justify-content: space-between; /* main-axis alignment */
  align-items: center; /* cross-axis alignment */
  flex-wrap: wrap;
  gap: 1rem;
}

/* item properties — set on a child, not the flex container */
.grow-item {
  flex: 1 1 auto; /* grow shrink basis */
  align-self: flex-start; /* overrides align-items for this one item */
  order: -1; /* moves it earlier visually — tab order still follows the DOM */
}

Try the values live in the playground below.

.layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 1.5rem;
}

.responsive-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.hero {
  grid-column: 1 / -1; /* span all columns */
}

Try the values live in the playground below.

.button {
  transition-property: transform, box-shadow, background-color;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  /* shorthand: transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); */
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -6px rgb(0 0 0 / 0.3);
}

Transitions fire on a property change caused by a class toggle, :hover, :focus, etc. — not on page load, unless you also declare @starting-style, which gives the browser an explicit “before” state to transition from on first render (e.g. display: none → shown).

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

.badge {
  animation: pulse 2s ease-in-out infinite;
}

/* scroll-driven, no JavaScript/IntersectionObserver needed — not supported in
   every browser yet, so treat it as progressive enhancement */
.reveal-on-scroll {
  animation: pulse linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

@media (prefers-reduced-motion: reduce) {
  .badge,
  .reveal-on-scroll {
    animation: none;
  }
}

Always pair a looping animation like this with a prefers-reduced-motion override — the live preview below does.

:root {
  --accent: #a78bfa;
  --radius: 12px;
}

.card {
  border-radius: var(--radius);
  border-color: var(--accent);
}

/* override for just this subtree */
.card--danger {
  --accent: #f87171;
}

Unlike Sass variables, custom properties are live in the DOM — inspect and edit them in devtools, or update them from JavaScript with el.style.setProperty('--accent', '#38e0e0').

:root {
  --accent: #a78bfa;
}

/* redeclaring --accent here only affects .danger and its descendants —
   everywhere else still sees the :root value */
.danger {
  --accent: #f87171;
}

.badge {
  color: var(--accent);
  /* falls back to 0.75rem if --badge-size is never defined anywhere */
  font-size: var(--badge-size, 0.75rem);
}

@property --progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.bar {
  /* @property lets the browser animate a custom property smoothly */
  width: var(--progress);
  transition: --progress 300ms ease-out;
}

A custom property’s value cascades and inherits like any other property — the nearest ancestor’s declaration wins, which is what makes .danger above able to locally override --accent without a global rewrite.

/* mobile-first: base styles apply everywhere, then override upward */
.grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a12;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

h1 {
  font-size: clamp(1.5rem, 1rem + 3vw, 3rem);
}

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

@container sidebar (min-width: 20rem) {
  .card {
    grid-template-columns: auto 1fr;
  }
}

.full-height {
  height: 100dvh; /* accounts for mobile browser chrome showing/hiding */
}