CSS Selectors: Element, ID, and Class, and When to Use Each

Before you can style anything in CSS, you need a way to tell the browser which element you're targeting. Basic CSS gives you three ways to do that: by element, by ID, or by class.

This is the written version of my CSS selectors video, part of my CSS beginners course. It's embedded near the top.

Key Takeaways

• An element selector (p, div, body) targets every instance of that tag on the page.
• An ID selector (#name) targets one specific element. IDs should only appear once per page.
• A class selector (.name) can apply to any number of elements, and one element can have multiple classes at once.
• When rules from different selector types could apply to the same element, more specific selectors win, ID over class over element.

Selecting by element

An element selector targets every instance of a tag on the page:

p {
  color: #000000;
  font-weight: bold;
}

That rule bolds and colors every <p> on the page. The same works for any tag:

body {
  background-color: red;
}

div {
  background: grey;
}

Every <div> gets that background, which is rarely what you actually want once a page has more than a couple of them.

Selecting by ID

To style one specific element without affecting every other element of the same tag, give it an id and target that instead:

<div id="special-div">This is some special content.</div>

#special-div {
  font-size: 20px;
}

That rule applies only to this one element. IDs come with a real constraint worth knowing: an id value should exist only once per page. Reuse one and the CSS rule still technically applies to every element sharing it, but HTML considers that invalid, and JavaScript methods that look elements up by ID (like document.getElementById) will only ever find the first match, silently ignoring the rest.

Selecting by class

A class can apply to any number of elements, and a single element can carry more than one class at once:

.foo {
  background: red;
  margin: 10px 0;
}

.bar {
  color: blue;
}

<div class="foo bar">Both classes apply here.</div>

Classes are what make shared, reusable styling practical. A button might get a base .button class for its shape and padding, plus a second class like .button-primary or .button-arrow for a specific variant, applied selectively instead of duplicating the base styles everywhere.

Specificity: which rule wins

Once a page has element, ID, and class selectors all in play, more than one can end up targeting the same element at the same time. CSS resolves that with specificity, a rough priority order:

Element (p)      -> lowest specificity
Class (.highlight) -> medium specificity
ID (#header)     -> highest specificity

An ID selector beats a class selector targeting the same property on the same element, and a class selector beats a plain element selector. What is CSS? covers the broader cascade this fits into, including what happens when inline styles enter the mix too.

See MDN's guide to CSS selectors for the full range of selector types beyond element, ID, and class.

Where to go next

CSS Colors and Inline, Internal, and External Style Sheets build directly on the selectors covered here.

FAQ

What's the difference between an ID and a class selector?

An ID selector (#name) is meant to target exactly one element and should only appear once per page. A class selector (.name) can apply to any number of elements, and one element can carry multiple classes at once.

Can an element have more than one class?

Yes. List multiple class names separated by spaces in the class attribute, like class="foo bar", and both classes' styles apply to that element.

What happens if I reuse the same ID on multiple elements?

The CSS rule still applies to all of them visually, but it's invalid HTML, and JavaScript methods like document.getElementById will only find the first match, ignoring the rest.

Which selector wins if an element matches an element, class, and ID rule at once?

The ID selector wins, then the class selector, then the plain element selector. This is part of CSS's broader specificity system.

Should I use classes or IDs for styling?

Classes, for almost everything. Reach for an ID only when you genuinely need to target one specific, unique element, or when a JavaScript hook needs a guaranteed-unique reference point.