CSS3 Reference

CSS3 Cheat Sheet

Flexbox, Grid, selectors, and core properties.

All Topics

Selectors & Specificity

:is() / :where()

:is() groups selectors (takes highest specificity). :where() same but zero specificity — great for resets.

Example: :is(h1,h2,h3) { margin-top: 1.5rem; }

:has()

"Parent selector" — style an element based on its descendants. Widely supported since 2023.

Example: .card:has(img) { padding: 0; } /* cards with images */

:not(:last-child)

:not() accepts complex selectors. Combine for powerful negative selection.

Example: li:not(:first-child):not(:last-child) { border-top: 1px solid; }

:nth-child(An+B of S)

New "of S" syntax filters to only matching elements before counting. Previously needed complex workarounds.

Example: li:nth-child(2n of .active) { color: red; }

Specificity: 0-0-1-0

IDs (0-1-0-0) beat classes (0-0-1-0) beat elements (0-0-0-1). Inline styles = 1-0-0-0.

Example: #main .card span /* 0-1-1-1 */ beats .card span /* 0-0-1-1 */

:focus-visible

Shows focus ring only for keyboard navigation, not mouse clicks. Better UX than :focus.

Example: button:focus-visible { outline: 3px solid blue; }

Attribute selectors

[attr^=val] starts with / [attr$=val] ends with / [attr*=val] contains.

Example: a[href^="https"] { color: green; } a[href$=".pdf"]::after { content: " (PDF)"; }

Flexbox

display: flex

Creates a flex formatting context. Direct children become flex items.

Example: .container { display: flex; gap: 1rem; }

flex-direction

row (default) / column / row-reverse / column-reverse. Sets main axis direction.

Example: .sidebar { flex-direction: column; }

justify-content

Aligns items along MAIN axis. flex-start, center, flex-end, space-between, space-around, space-evenly.

Example: .nav { justify-content: space-between; }

align-items / align-self

Aligns items along CROSS axis. align-self overrides for individual item.

Example: .card { align-items: center; } .card__badge { align-self: flex-start; }

flex: grow shrink basis

Shorthand for flex-grow, flex-shrink, flex-basis. flex:1 = equal flexible columns.

Example: .col { flex: 1 1 0%; } .sidebar { flex: 0 0 250px; }

flex-wrap / flex-flow

flex-wrap: wrap allows items to wrap. flex-flow is shorthand for direction + wrap.

Example: .card-grid { flex-flow: row wrap; gap: 1rem; }

order

Change visual order of flex item without changing DOM order. Default is 0.

Example: .featured { order: -1; } /* shows first visually */

gap (flex-gap)

Sets spacing between flex items rows and columns. Replaces margin hacks.

Example: .toolbar { display:flex; gap: 0.5rem 1rem; /* row-gap col-gap */ }

CSS Grid

grid-template-columns

Define column track sizes. repeat(), fr units, minmax(), auto-fill, auto-fit.

Example: .grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

grid-template-areas

Named grid layout with ASCII art syntax — visual and maintainable.

Example: grid-template-areas: "header header" "nav main" "footer footer";

grid-column / grid-row

Shorthand for start/end line placement. Use span to span multiple tracks.

Example: .hero { grid-column: 1 / -1; grid-row: span 2; }

subgrid

Child grid participates in parent's grid tracks — enables true column alignment across nested elements.

Example: .card { display: grid; grid-row: span 3; grid-template-rows: subgrid; }

place-items / place-content

Shorthand for align-items+justify-items / align-content+justify-content. center centers both axes.

Example: .modal { display:grid; place-items: center; }

minmax(min, max)

Track size range — column grows from min to max. Use min-content/max-content for intrinsic sizes.

Example: grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr);

auto-fill vs auto-fit

auto-fill creates empty tracks; auto-fit collapses them — use auto-fit for "fill then center" layouts.

Example: repeat(auto-fit, minmax(250px,1fr)) /* collapses incomplete rows */

Colors, Gradients & Units

oklch() / oklab()

Perceptually uniform color spaces — gradients don't go muddy, colors are editorially predictable.

Example: color: oklch(70% 0.15 145); /* lightness chroma hue */

color-mix()

Mix two colors in any color space with a given percentage — built-in tint/shade without Sass.

Example: background: color-mix(in oklch, blue 30%, white);

CSS custom properties (--var)

CSS variables — cascading, can be updated in JS, scoped to element. More powerful than preprocessor vars.

Example: :root { --primary: #6366f1; } .btn { color: var(--primary, blue); }

linear-gradient / conic-gradient

Gradient backgrounds. conic-gradient creates pie charts and starburst patterns purely in CSS.

Example: background: conic-gradient(red 40%, blue 40% 70%, green 70%);

clamp(min, val, max)

Constrains a value between min and max — fluid typography and spacing without media queries.

Example: font-size: clamp(1rem, 2.5vw, 2rem);

container queries @container

Style based on PARENT container size, not viewport — true component-based responsive design.

Example: .parent { container-type: inline-size; } @container (min-width: 400px) { .child { ... } }

dvh / svh / lvh units

Dynamic/small/large viewport height — fix the 100vh mobile browser bar problem.

Example: .hero { min-height: 100svh; /* safe, excludes browser UI */ }

@layer

Cascade layers — explicitly control specificity order of your CSS regardless of selector weight.

Example: @layer base, components, utilities; @layer utilities { .mt-4 { margin-top: 1rem; } }

Animations & Transforms

@keyframes name

Define animation steps from 0% to 100% (or from/to). Reference with animation-name.

Example: @keyframes slide-in { from { transform: translateX(-100%); } to { transform: none; } }

animation shorthand

Example: animation: slide-in 0.3s ease-out both;

transition shorthand

Smooth property changes. Always specify which property, not "all" (performance).

Example: transition: transform 0.2s ease, opacity 0.2s ease;

transform functions

translate, rotate, scale, skew — compose multiple. Use translate3d for GPU compositing.

Example: transform: translateY(-4px) scale(1.02); /* card hover lift */

will-change

Hints browser to promote element to its own compositor layer ahead of animation.

Example: .modal { will-change: transform, opacity; } /* use sparingly! */

@starting-style

Define initial style for transition when element is first displayed (e.g., popover entry animations).

Example: @starting-style { .drawer { transform: translateX(100%); } }

animation-timeline: scroll()

Scrub an animation based on scroll position — no JavaScript required. (2023+)

Example: .progress { animation: grow linear; animation-timeline: scroll(root); }

Layout & Positioning

position: sticky

Element sticks relative to scroll within its parent container. Parent must have overflow:visible.

Example: .nav { position: sticky; top: 0; z-index: 100; }

aspect-ratio

Maintain proportional dimensions. Eliminates the old "padding hack" for responsive embeds.

Example: .video { aspect-ratio: 16/9; width: 100%; }

object-fit / object-position

Control how img/video fills its container. cover fills; contain fits; position sets focal point.

Example: img { object-fit: cover; object-position: top center; }

margin: auto (centering)

Auto margins consume all available space — centering block elements and flex/grid item alignment.

Example: .container { max-width: 1200px; margin-inline: auto; }

logical properties

margin-inline / padding-block / border-inline-start — direction-agnostic layout (RTL support).

Example: .card { padding-inline: 1.5rem; margin-block: 1rem; }

scroll-snap

CSS-only carousel/slider. scroll-snap-type on container, scroll-snap-align on items.

Example: .slides { scroll-snap-type: x mandatory; } .slide { scroll-snap-align: start; }

overscroll-behavior

Prevent scroll chaining — contains scroll within a modal without body scrolling behind it.

Example: .modal { overscroll-behavior: contain; }

CSS nesting

Native CSS nesting (2023) — write nested rules without Sass/LESS. Use & for parent reference.

Example: .card { color: black; &:hover { color: blue; } & .title { font-size: 1.5rem; } }

Quick Access