The class selector is probably the selector you will reach for most often in CSS. It lets you attach a style to one or several elements without touching their position in the page or their HTML tag.
Unlike an id, a class can be placed on as many elements as needed, and a single element can carry several classes at once. That is what makes it the basic building block of any well organized stylesheet.
Definition
The class selector targets any HTML element whose class attribute contains the given name, written with a dot in the stylesheet. An element written as <div class="card"> is targeted by the selector .card.
Syntax and multiple classes
A single HTML element can receive several classes, separated by a space inside the class attribute. In CSS, that exact combination can then be targeted by chaining the dots together, with no space between them.
/* targets any element with the class "button" */
.button {
padding: 10px 20px;
border-radius: 6px;
}
/* targets only an element that has BOTH the "button" and "danger" classes */
.button.danger {
background-color: #e63946;
}The matching HTML might look like <button class="button danger">Delete</button>. The button class sets the shared baseline for every button, and the danger class adds a variant on top, without duplicating the base rules.
Why the class beats the id
The ID selector can only target a single element per page, since an id must remain unique inside the document. The class, on the other hand, is built to be reused: the same style can apply to ten buttons, a hundred cards, or an entire list of articles, without copying the rule over and over. It is also a matter of Specificity: an id carries far more weight than a class in the calculation that settles conflicts between competing rules, which makes an id-based style harder to override later. Sticking to classes keeps a stylesheet where every rule carries a comparable, predictable weight.
Organizing class names
On a project that keeps growing, naming classes quickly becomes a topic of its own. Methodologies such as BEM offer a naming convention that avoids collisions between components and makes the role of each class obvious just by looking at it, for example card__title for the title inside a card component.
| Situation | Selector |
|---|---|
| Every button | .button |
| Buttons in the danger variant | .button.danger |
| A single element on the page | #header |
Utility classes or semantic classes
Two philosophies coexist for naming classes. Semantic classes describe a role, like .product-card or .main-menu, and stay readable even without knowing the associated style. Utility classes describe one isolated visual effect, like .mt-4 for top margin or .text-center for centered text, and combine freely on the same element to compose a layout without writing a single extra line of CSS. Neither approach is universally better: semantic classes favor readability of the HTML, while utility classes favor speed of execution and keep the stylesheet's size in check over time. Many projects end up mixing both, reserving utility classes for one-off adjustments.
Frequently asked questions
Technically yes, but the styles of both components then clash since they share the same selector. A clear naming convention avoids that kind of collision as a project grows.
Yes, a class name can contain letters, numbers, dashes, and underscores, as long as it does not start with a number. Dashes remain the most common convention in CSS.
No, that is not a problem by itself. Stacking several short, specialized classes is often more readable and more flexible than one giant class that mixes too many different responsibilities.