CSS Selectors Cheatsheet: Every Selector You'll Actually Use

Selectors are how CSS finds the elements you want to style. The better you know them, the less BEM-style class soup you have to write. Here's the practical list — no obscure edge cases, just what real production code uses.

Basic selectors

• * — universal
• tag — element type
• .class — class
• #id — id (avoid for styling)
• [attr=value] — attribute

Combinators

• A B — descendant
• A > B — direct child
• A + B — adjacent sibling
• A ~ B — general sibling

Powerful pseudo-classes

/* every other row */
tr:nth-child(even) { background: #f7f7f7; }

/* style a card when it contains an image */
.card:has(img) { padding-top: 0; }

/* style inputs only after the user has interacted */
input:user-invalid { border-color: red; }

:has() — the parent selector we waited 20 years for

Available in every modern browser since 2023, :has() lets you style an element based on its descendants. Use it for conditional layouts without JavaScript.

Specificity in one sentence

Inline > id > class/attr/pseudo-class > tag/pseudo-element. When in doubt, use a slightly more specific selector — never !important.