What you'll learn
A rule only works if it targets the right elements. Selectors are how you point CSS at exactly what you want to style — and when two rules collide, specificity decides the winner. Master these and CSS stops feeling random.
By the end you'll be able to:
- Use type, class, and ID selectors
- Combine selectors and target by relationship, attribute, and state
- Calculate specificity to predict which rule wins
- Understand which properties inherit
The core selectors
Three selectors do most of the work, and grouping applies one rule to several at once:
/* Type selector — every <p> */
p { color: #333333; }
/* Class selector — any element with class="lead" */
.lead { font-size: 20px; }
/* ID selector — the one element with id="hero" */
#hero { text-align: center; }
/* Grouping — apply to several selectors at once */
h1, h2, h3 { font-family: Georgia, serif; }Key idea
Combinators & pseudo-classes
Combinators select elements by their relationship, attribute selectors match by attribute, and pseudo-classes match by state (like :hover or :focus):
nav a { color: blue; } /* any <a> inside <nav> (descendant) */
ul > li { margin: 4px; } /* <li> that is a direct child of <ul> */
h2 + p { margin-top: 0; } /* the <p> immediately after an <h2> */
input[type="email"] { border: 1px solid green; } /* attribute */
button:hover { background: #1d4ed8; } /* pseudo-class */Specificity
When several rules set the same property on an element, the most specific selector wins. Specificity is scored by the kinds of selectors used — think of it as columns that only tie-break rightward when the higher columns are equal:
| Selector kind | Weight | Example |
|---|---|---|
Inline style | Highest | style="..." |
ID | High | #hero |
Class / attribute / pseudo-class | Medium | .lead, :hover |
Type / pseudo-element | Low | p, ::before |
If two rules have equal specificity, the one that comes later in the CSS wins — that's the source-order part of the cascade.
Watch out
!important, but treat it as a last resort. It breaks the natural cascade and leads to "!important wars" that make CSS impossible to maintain. Fix specificity by writing better selectors instead.Inheritance
Some properties inherit from a parent to its children automatically — mostly text-related ones like color, font-family, and line-height. Others, like margin, border, and width, do not. You can control it explicitly with the keywords inherit (take the parent's value), initial (the property's default), and unset.
Recap & quick check
Key takeaways
- Type (p), class (.lead), and ID (#hero) are the core selectors; group with commas.
- Combinators (space, >, +, ~), attribute selectors, and pseudo-classes target by relationship, attribute, and state.
- Specificity: inline > ID > class/attribute/pseudo > type; equal specificity → later rule wins.
- Prefer reusable classes; use IDs sparingly and avoid !important.
- Text properties like color and font inherit; box properties like margin don't.
Quick check
1. Which selector targets an element with class="card"?
2. Which is the most specific?
3. Two rules have equal specificity. Which wins?
4. What does nav a { } select?
5. Which property is inherited by default?
You can target anything now. Next we bring pages to life with colour, units, and typography.