Classes and IDs
The problem with element selectors alone:
So far, CSS selectors like p, h1, and div target every element of that type. But what if you don't want to style all of them the same way?
/* This turns ALL paragraphs red — no exceptions */
p {
color: red;
}
What if you have three paragraphs and only want the first and third to be red?
What if you have ten
<div> elements and only want one of them to have a blue background?Element selectors can't do this. You need a way to label specific elements.
In order to make your HTML elements more specific, you can either group them in a class, or name it with a unique id.
With element selectors (
p, h1, div...) you only wrote CSS —
the HTML stayed untouched. Classes and IDs are different: you must
first add a label to the HTML element, then write a CSS rule targeting that label.
| Step 1 — label the element in HTML | Step 2 — target the label in CSS |
|---|---|
<p class="important"> Oh so important. </p> |
.important {
color: red;
} |
class="important" in the HTML, the CSS rule .important { ... } has nothing to target.
Classes:
A class is a grouping of elements with the same class name. Multiple elements can belong in the same class. In the following example, the first <p> and the <div> element is in the same class named important.
<p class="important"> Oh so important. </p> <p> Not so important </p> <div class="important"> Also important </div>
In order to specify a class in CSS, use a "." (period), then with no intervening space type the name of the class. You can use the class selectors alone or together with another selector.
Sample file [06_classes_and_id.html]
/* CSS selector for all members of the class "important" */
.important {
font-weight: bold;
}
/* CSS selector for any <p> element in the group "important" */
p.important {
color: red;
}
These two rules are not redundant — they target different (overlapping) sets of elements.
.important is broad: it applies to any element with that class.
p.important is narrower: it applies only to <p> elements with that class.
Combined, here is what each element actually receives:
| Element | matched by .important |
matched by p.important |
Result |
|---|---|---|---|
<p class="important"> |
✓ | ✓ | bold + red |
<p> (no class) |
✗ | ✗ | unstyled |
<div class="important"> |
✓ | ✗ (not a <p>) | bold only — no red |
IDs:
An ID must be unique within the HTML page. In CSS use a # (hash sign) then with no intervening space, the name of the ID. You can combine the ID selector with another selector.
Sample file [06_classes_and_id.html]
<div id="newest"> newest blog entry </div> <div> blog entry from yesterday </div> <div> blog entry from 3 days ago </div>
And in CSS:
#newest {
font-weight: bold;
}
div#newest {
color: red;
}
Unlike the class case, these two selectors do target the same element — and here is why:
an ID must be unique, so there can only ever be one element on the page with id="newest".
Whether you write #newest or div#newest, you always land on that same one element.
| Selector | What it matches | Redundant? |
|---|---|---|
#newest |
the one element with id="newest", whatever type it is |
Both select the same element — yes, redundant in terms of targeting |
div#newest |
a <div> with id="newest" — same element, since there is only one |
So why ever write
div#newest? Two reasons:
- Specificity —
div#newesthas higher specificity than#newestalone (it adds the element type to the weight). If two rules conflict, the more specific one wins. - Clarity — it documents that you are expecting this ID to be on a
<div>, which can help when reading the CSS later.
#newest alone is almost always sufficient for IDs — unlike with classes,
where p.important vs .important genuinely narrows the set of matched elements.
Note that you can use IDs and classes as part of a selector using comma separated list or contextual selectors.
/* both div#newest, p.important assigned background color yellow */
div#newest, p.important {
background-color: yellow;
}
/* em inside p.important assigned background color red */
p.important em {
background-color: red;
}
/* what is this saying? */
p.important em, div#newest em {
font-size: 20px;
}
Comma selector — one rule targets multiple selectors:
Contextual (descendant) selector — targets elements only when nested inside another:
"What is the difference between a CSS class and a CSS ID? When should I use one vs. the other?" "Can an HTML element belong to more than one class? Show me an example." "What does the selector 'p.important' select? How is it different from just '.important'?" "What does 'div#newest, p.important { background-color: yellow; }' do? Why the comma?"
