CSS selectors are how you attach rules to the nodes you actually wrote. This lesson focuses on the selectors you will use daily in combined HTML/CSS work.
High-value selectors
- Class —
.card { }reusable styling hooks (preferred). - Type —
p { }good for base typography, risky for buttons/links without scoping. - Descendant —
.card p { }styles paragraphs inside cards only. - Child —
.toolbar > a { }direct children only. - Attribute —
input[type="email"] { }for form variants.
ID selectors: use rarely
#main wins specificity wars and is hard to reuse. Prefer classes unless you truly need a unique hook (skip links, in-page anchors).
Matching practice
- Add
class="highlight"to one list item—style only that item. - Use
.features lito space list items inside the features section. - Try
.features > liand confirm it behaves the same here (direct children).
Important interview questions and answers
- Q: Why are classes preferred over IDs for styling?
A: Classes are reusable and keep specificity lower, making overrides predictable. - Q: What is the difference between descendant and child combinators?
A: Descendant matches any depth; child (`>`) matches only direct children. - Q: Can one element have multiple classes?
A: Yes—`class="card featured"`; selectors like `.card.featured` target both together.
Challenge
Style the third item only
- Add
.features li:nth-child(3)with a distinct color. - Verify it still works if you add another list item.
Done when: only the third feature is highlighted.