CSS Selectors

Element, class, id, descendant, attribute — every way to target HTML.

Definition

Selector	Targets	Example
`*`	Everything	`* { box-sizing: border-box; }`
`tag`	All tags	`p { ... }`
`.class`	Class	`.btn { ... }`
`#id`	Single id	`#hero { ... }`
`a, b`	Multiple	`h1, h2 { ... }`
`a b`	Descendant	`nav a { ... }`
`a > b`	Direct child	`ul > li { ... }`
`a + b`	Adjacent sibling	`h1 + p { ... }`
`a ~ b`	General sibling	`h1 ~ p { ... }`
`[attr]`	Attribute	`[disabled] { ... }`
`[attr="val"]`	Attribute match	`[type="email"]`
`:hover`	Pseudo-class	`a:hover { ... }`
`::before`	Pseudo-element	`p::before { ... }`

Selector Cheat Sheet

css
* { margin: 0; padding: 0; box-sizing: border-box; }    /* universal */
body { font-family: sans-serif; }                        /* tag */
.card { padding: 1rem; }                                 /* class */
#hero { height: 400px; }                                 /* id */
nav a { color: orange; }                                 /* descendant */
ul > li { list-style: none; }                            /* direct child */
input[type="email"] { border: 1px solid blue; }          /* attribute */
a:hover { text-decoration: underline; }                  /* pseudo-class */
p::first-letter { font-size: 2em; }                      /* pseudo-element */

Specificity (priority)

Inline style="" (1000)
#id (100)
.class, [attr], :hover (10)
tag, ::before (1)

Higher score wins. Same score → last rule wins.

Common Mistakes

#id overuse — too specific to override later. Prefer .class.
Extreme nesting — body div ul li a — over-specific, brittle.
!important to win — fix specificity instead.

Interview Questions

Practice Exercises

Style nav links — nav a { ... }. Hint: descendant.
Email input — input[type="email"]. Hint: attribute selector.
First letter — p::first-letter { font-size: 2em; }. Hint: pseudo-element.

💡 Think Like a Programmer: Selectors are CSS's query language. Learn 5 — tag, .class, #id, a b, a:hover — and you cover 90% of code.

AI-powered recap