IDs, classes, and element selectors: what to use and why

Use a class when the same styling should apply to several elements. Use an ID for a unique document target, such as a fragment link or label/input relationship. You can style either, but uniqueness makes IDs less reusable for component styling.

See the three selector types

The element rule sets all paragraph backgrounds. The class adds a shared border. The ID changes only one paragraph’s foreground. All declarations participate in the cascade; this example has no competing layers or important declarations.

<p class="note">Reusable note class.</p>
<p class="note" id="special">Same class, unique ID.</p>
<p>Only the element rule.</p>

p {
  background: #eff6ff;
  padding: 0.75rem;
}
.note {
  border-inline-start: 4px solid #2563eb;
}
#special {
  color: #115e59;
}

Reuse a class; keep each ID unique

An element may have multiple space-separated classes but a single ID value. Multiple selectors can still match that one element. An ID must be unique within its document; repeating it for several cards breaks fragment and form relationships. Repeated IDs in separate isolated example documents are separate scopes.

Classes are a sensible default for reusable styling. Element selectors are useful for base typography and scoped content rules; they need not match every element on the entire website if a surrounding selector limits them. IDs remain useful for real document identity.

Specificity is one part of the cascade

Within competing declarations of the same relevant origin, importance, and layer, an ID selector has greater specificity than a class selector, which has greater specificity than a type selector. That does not mean an ID always wins against every declaration: layers, important rules, inline styling, transitions, and other cascade stages also matter.

Combinators do not add specificity. Attribute selectors, pseudo-classes, and selectors such as :where()/:has() have their own rules. Avoid solving every conflict by adding more IDs or !important. Inspect the winning declaration first.

The old lesson’s // comments were SCSS syntax, not plain CSS. The working example uses valid CSS and demonstrates reuse rather than claiming IDs are more flexible because they are unique.

Learn cascade and specificity and child combinators.

Sources

Reference 1 Reference 2 provide the technical details and current compatibility information.