CSS Selectors Cheat Sheet: Class, Attribute, Combinators & Specificity

CSS selectors choose which elements a rule applies to. Classes are the default tool; IDs and inline styles raise specificity and make overrides painful. Combinators describe relationships ( , >, +, ~), and :is() / :where() keep grouped selectors sane.

This CSS cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• Class: .btn — reuse across the site. Prefer classes over tagging every div.
• ID: #main is high specificity. Reserve IDs for JS hooks and skip-link targets.
• Attribute: [type="email"], [aria-expanded="true"], [data-state="open"].
• Descendant: .card p any p inside. Powerful and easy to overreach.
• Child: .list > li only direct children.
• Sibling: h2 + p next sibling; h2 ~ p all following siblings.
• Specificity: (inline, IDs, classes/attributes/pseudos, elements). :where() is 0,0,0.
• Group: :is(h1, h2, h3) keeps specificity of the most specific argument.

Copy-paste examples

Selectors you will actually debug

Attribute selectors pair well with ARIA state. Keep specificity low so utilities can win without !important.

.nav a[aria-current="page"] {
  font-weight: 700;
}
.card > header {
  margin-bottom: 0.5rem;
}
:is(h1, h2, h3) + p {
  font-size: 1.125rem;
}
:where(.prose) a {
  text-decoration: underline;
}

Common mistakes

• Styling with long descendant chains (.page .wrap .box .title span) that break when HTML moves.
• Using IDs in CSS because they were already on the element for JavaScript.
• !important to beat your own earlier rule instead of lowering specificity.
• Tag-only selectors (div, p) that restyle third-party widgets by accident.

FAQ

1. Why does my class lose to another class? Same specificity: source order wins, then cascade layers. Check a later file, a more specific combinator, or inline styles.

1. Should I use BLOGPH0? A universal reset for box-sizing is fine. A * { color } or * { transition } is usually too broad.

1. Are IDs faster? Selector matching is rarely your bottleneck. Specificity pain is. Prefer classes.

Related CSS cheat sheets

• Css Cheat Sheet 2026
• Css Flexbox Cheat Sheet
• Css Grid Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.