CSS Selector Cheat Sheet

* { box-sizing: border-box; }

Matches every element. Useful for resets, but keep heavy declarations out of universal rules.

button { cursor: pointer; }

Matches every element with that tag name.

.card { border-radius: 12px; }

Matches elements with a class. This is the usual workhorse for component styling.

#app { min-height: 100vh; }

Matches a single ID. High specificity makes IDs harder to override.

button[disabled] { opacity: 0.5; }

Matches elements that have the attribute, regardless of its value.

input[type="email"] { min-width: 18rem; }

Matches an attribute value exactly.

a[href^="https"] { color: #0ea5e9; }

Useful for matching URL prefixes, file naming conventions, or data attributes.

img[src$=".svg"] { image-rendering: auto; }

Common for file extension checks.

[class*="icon"] { flex-shrink: 0; }

Powerful but broad. Prefer explicit classes when you control the markup.

.card .title { font-weight: 700; }

Matches nested descendants at any depth.

.tabs > button { border-radius: 999px; }

Matches direct children only.

h2 + p { margin-top: 0.5rem; }

Matches the first matching sibling immediately after another element.

h2 ~ p { color: #475569; }

Matches later siblings that share the same parent.

.button:hover { background: #0284c7; }

Applies when a pointing device hovers the element.

.button:focus-visible { outline: 3px solid #38bdf8; }

Preferred for visible keyboard focus without forcing focus rings on most mouse clicks.

input:checked + label { font-weight: 700; }

Matches checked checkboxes, radios, and selected options.

tr:nth-child(2n) { background: #f8fafc; }

Matches elements by sibling position. 2n is every even item.

.tab:not(.active) { opacity: 0.7; }

Excludes selectors. The argument still contributes specificity in modern CSS.

:is(h1, h2, h3) a { text-decoration: none; }

Groups selector alternatives. Its specificity is the highest specificity argument.

:where(section, article) > h2 { margin-block-start: 0; }

Matches like :is(), but contributes zero specificity.

.badge::before { content: ""; }

Creates a generated child-like pseudo-element before content.

.link::after { content: " ->"; }

Creates generated content after the element content.

input::placeholder { color: #94a3b8; }

Styles placeholder text inside form fields.