CSS Selectors
css-selectors
Code Snippets
CSS Grid Responsive Layout Snippet
A responsive card grid that fills as many columns as fit and never produces an awkward last row is a one-line CSS Grid trick. This snippet covers the canonical `auto-fill` plus `minmax` recipe, the `auto-fit` variant that collapses empty tracks, and a row-spanning variant for masonry-like layouts. No media queries, no JavaScript.
Center Anything with Flexbox
Centering a child horizontally and vertically used to require pixel math, table tricks, or absolute-positioning hacks. Flexbox collapses the whole thing into three properties. This snippet covers the canonical centering pattern, the inline-flex variant for centering inside button-shaped wrappers, and the gap-aware multi-child version that keeps spacing consistent.
Truncate Text with Ellipsis
Single-line text truncation is one of the most common UI requirements: titles, table cells, breadcrumbs. Done wrong, the text wraps or overflows. Done right, it shrinks with a clean ellipsis. This snippet covers the three-line single-line recipe, an inline variant that needs `min-width: 0` inside flex parents, and a tooltip-friendly version that exposes the full text on hover.
Multi-line Text Truncation
Single-line truncation is solved with `text-overflow: ellipsis`, but truncating to N lines requires the WebKit line-clamp API. This snippet covers the standard three-line ellipsis using the modern `line-clamp` shorthand, the older `-webkit-line-clamp` form for broader support, and a JS-free fade-out variant for browsers without line-clamp.
Sticky Footer with Flexbox
A footer that stays at the bottom of the viewport on short pages and at the bottom of the content on long pages used to require absolute positioning, fixed heights, or table-cell tricks. Flexbox solves it with two declarations. This snippet covers the canonical body-flex layout, the grid-based equivalent, and the wrapper variant for apps that already have a top-level container.
Dark Mode with CSS Variables
Implementing dark mode without a heavy theming library comes down to a stable token contract and a media query. This snippet covers the system-preference dark mode using `prefers-color-scheme`, a class-based override that lets users opt in or out, and a per-component theme that nests tokens for a single section.
Component-Aware Container Queries
Media queries respond to viewport size, but components do not always live at viewport scale: a card might render in a sidebar at 240px or in a feature row at 800px. Container queries let a component style itself based on its own width. This snippet covers the basic `@container` rule, the size container with named breakpoints, and the style container variant for theming children based on parent state.
CSS Selectors Cheat Sheet
A practical tour of the selectors that cover 90% of real stylesheets: the basics (type, class, id, attribute), combinators for relationships in the DOM tree, the modern pseudo-classes (`:is`, `:where`, `:not`, `:nth-child`), the most common pseudo-elements (`::before`, `::after`, `::placeholder`), and a quick specificity reference so you can predict which rule wins. Skim it once to set the mental model, then come back when a hover style refuses to apply.
CSS Preprocessor Features Cheat Sheet
If you have used SCSS or Less, you know variables, nesting, and mixins as preprocessor features. Native CSS now offers all three: custom properties (`--var`), the CSS Nesting Module, and `@layer`. This snippet shows the SCSS form alongside the native form for each so you can see when you actually need a preprocessor and when plain CSS is enough. Audience: practitioners moving from SCSS to native CSS and wondering what they get to drop.