ID vs. class

Both IDs and classes let you target HTML elements with CSS. They look similar in practice but follow different rules — and mixing them up is one of the most common sources of specificity bugs. This article explains the difference and tells you when to reach for each one.

The fundamental difference

A class (.name) can be applied to any number of elements on a page. Multiple elements can share the same class, and a single element can carry multiple classes.

An ID (#name) must be unique per page. Only one element on any given page should have a particular ID. While browsers will not crash if you repeat an ID, it breaks CSS behavior and makes JavaScript targeting unreliable.

Specificity: why IDs cause override problems

CSS specificity determines which rule wins when two selectors target the same element and same property. IDs carry significantly higher specificity than classes:

An ID outweighs any number of classes. If you style an element with #hero and later try to override it with .hero-dark, the ID rule wins regardless of order. This is why heavy use of IDs for styling leads to an arms race of specificity hacks.

When to use an ID

Anchor links — IDs are the standard way to create in-page navigation targets. A link to #contact scrolls the page to the element with id="contact".

JavaScript targeting — document.getElementById() and querySelector('#id') rely on IDs to find a specific, unique element. If your JavaScript needs to interact with one particular element, an ID is a clean identifier.

Accessibility landmarks — Some ARIA patterns use IDs to associate labels with controls (aria-labelledby, aria-describedby, <label for="...">). These require a unique ID on the referenced element.

When to use a class

Styling — almost always. If you want to control how something looks, use a class. Classes are reusable, composable, and carry manageable specificity. One class can be applied to dozens of elements; changing it once updates them all.

The ID field in Site Designer

In the Design pane, the Element tab has a dedicated ID field separate from the class field. Enter an ID here to assign id="your-id" to the element’s HTML. Site Designer displays the ID in orange in the selector field (see The color-coded selector system) so it is immediately obvious when an ID is in scope.

Quick reference