CSS Selectors Basics

Selectors are how CSS finds the elements you want to change. This chapter covers the foundational selectors — element, class, id, universal and grouping — and introduces specificity, the ranking system that decides which rule wins when they collide.

Element selector

Use the tag name to style every element of that type:

p {
  color: #334155;
}

h1 {
  font-weight: 700;
}

Expected output: every paragraph becomes slate-grey and every top heading becomes bold.

Element selectors are great for sensible defaults (base typography), but too broad for components — you rarely want every button to look identical.

Class selector

Classes are your main tool. Prefix with a dot . and match any element whose class attribute contains it:

<button class="btn btn--primary">Buy now</button>
<a class="btn btn--ghost" href="/cart">Cart</a>

.btn {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  border-radius: 0.6rem;
  font-weight: 600;
}

.btn--primary { background: #4f46e5; color: white; }
.btn--ghost   { border: 1px solid #4f46e5; color: #4f46e5; }

Expected output: two buttons sharing size and shape, one filled indigo, one outlined.

An element can carry several classes — space-separated — and each adds its styles. That is how you build reusable components with small variations.

id selector

Prefix with # to match a unique id:

<div id="sidebar">…</div>

#sidebar {
  width: 240px;
}

Ids are unique per page and carry high specificity — a rule with an id beats class rules easily. Modern CSS rarely needs them for styling (use ids for JavaScript anchors and labels instead). When you need a "unique" look, a modifier class like .sidebar--narrow is easier to override.

Universal selector

* {
  box-sizing: border-box;
  margin: 0;
}

The asterisk matches everything. It is perfect for tiny resets like box-sizing (see The Box Model) but avoid styling everything with real design values — it has zero specificity and hits elements you did not plan for.

Grouping selector

Comma-separate selectors to share one declaration block:

h1, h2, h3 {
  font-family: Georgia, serif;
  line-height: 1.25;
}

Equivalent to writing the block three times — but never add a space after the comma in a way that breaks the list (a stray line break is fine).

Selector cheat sheet

Specificity: who wins?

When two rules target the same element, the browser scores them (roughly):

1. Inline styles — always win (avoid them).
2. Ids — score 100.
3. Classes, attributes, pseudo-classes — score 10 each.
4. Elements and pseudo-elements — score 1 each.

p            { color: black; }   /* 0-0-1 → loses */
.note        { color: blue; }    /* 0-1-0 → wins */
#footer p    { color: red; }     /* 1-0-1 → wins over both */

The full scoring system — including ties, inheritance and !important — is covered in CSS Variables & Specificity.

Naming classes that age well

• Name by what it is, not how it looks: .card not .grey-box.
• Use lowercase kebab-case: .user-avatar.
• Block + modifier pattern: .btn .btn--outline .btn--sm.
• Avoid styling bare tags for components — the bare button element is fine for defaults, but every component deserves a class.

Common mistakes

• Overusing ids — their high specificity forces !important battles later.
• Styling tags for components — hard to reuse and easy to break other pages.
• Copy-paste specificity escalation — when a rule "does not apply", inspect first: a later id rule probably wins.

Practice checklist

1. Build a two-button group (primary + ghost) using only classes.
2. Write a rule with an id and one with a class for the same element — inspect to confirm the id wins.
3. Convert one element selector from your page into a class. Notice how it frees you to apply the style elsewhere.

Selectors get powerful when elements are related — next up: Combinators & Pseudo-classes.