CSS Syntax & Selectors
Selectors are how you aim. Element, class, ID, attribute, combinators — each targets differently and carries different specificity weight. Master a handful and you can style anything without touching the HTML twice.
1. The core selectors
| Selector | Matches | Example |
|---|---|---|
p | Every element of that type | p { } |
.card | Everything with that class | .card { } |
#hero | The one element with that id | #hero { } |
[type="email"] | By attribute value | input[type="email"] { } |
* | Everything | * { margin: 0; } |
Day to day, classes do 90% of the work: they're reusable, composable, and carry moderate specificity. Reserve IDs for anchors and JavaScript hooks, not styling.
2. Combinators: selecting by relationship
article p { } /* descendant: any p inside article */
article > p { } /* child: only direct children */
h2 + p { } /* adjacent: the p right after an h2 */
h2 ~ p { } /* general sibling: every p after h2 */Combinators let structure do the targeting, so you don't need a class on every element. Grouping helps too: h1, h2, h3 { font-family: ... } styles all three in one rule.
.nav ul li a span are fragile and hard to override. Prefer a single meaningful class.3. Try it yourself
Only the paragraphs with class note should turn amber, and only the direct-child paragraph of .box should be bold. Add the two selectors.
4. Quiz — check your understanding
CSS Syntax & Selectors Quiz
4 questions · pass at 60%Q1. Which selector targets elements with class "active"?
Q2. ul > li selects…
> child combinator only matches direct children.Q3. Which is generally best for reusable styling?
Q4. h2 + p matches…
Every lesson quiz you pass (60%+) is saved in your browser and counts toward the CSSmatic Certificate of Completion.