.
Selects elements that have the given class in their class attribute. The most commonly used selector for styling components.
Example
#.btn {
padding: 8px 14px;
border: 0;
border-radius: 8px;
background: #3f3f46;
color: #fff;
font-weight: 600;
}
.btn.primary {
background: #7c3aed;
}<div style="display: flex; gap: 8px;">
<button class="btn" type="button">Cancel</button>
<button class="btn primary" type="button">Save progress</button>
</div>Definition and usage
#A class selector starts with a dot: .card selects every element that has the word card in its class attribute. The attribute can hold several classes separated by spaces (class="card pro"), and the selector matches as long as the one you’re looking for is among them.
Classes are the foundation of solid CSS. You can give one class to many elements of different types, and a single element can carry several classes. A class’s specificity is (0, 1, 0): higher than a type selector, but much lower than an ID, so rules are easy to combine and override.
Several classes written together, with no space, mean "all of them at once": .btn.primary only hits an element that has both classes. With a space (.card .title), it’s an entirely different selector, the descendant combinator.
Case matters: .Card and .card are two different classes. A class name in a selector also can’t start with a digit (e.g. .1column) without escaping the character, so it’s simplest to avoid names like that.
Syntax
#.class-name { property: value; }Notation variants
#- Every element with the class
tag, regardless of its tag or any other classes. - Two classes with no space: the element must have both at once.
- A tag combined with a class: only buttons that have the class
tag. - An attribute selector that works exactly like
.tagand carries the same weight. A class is just a convenient shorthand.
Notation variants in practice
#.tag
tag, regardless of its tag or any other classes..tag { background: #7c3aed; color: #fff; }.tag.hot
.tag.hot { background: #7c3aed; color: #fff; }[class~="tag"]
.tag and carries the same weight. A class is just a convenient shorthand.[class~="tag"] { background: #7c3aed; color: #fff; }More examples
#.card {
padding: 12px 14px;
border-radius: 12px;
background: #18181b;
}
.card__title {
margin: 0 0 4px;
font-size: 16px;
}
.card--pro {
outline: 2px solid #f59e0b;
}<div style="display: grid; gap: 10px;">
<div class="card">
<h3 class="card__title">HTML course</h3>
<p style="margin: 0; color: #a1a1aa;">Regular card</p>
</div>
<div class="card card--pro">
<h3 class="card__title">React course</h3>
<p style="margin: 0; color: #a1a1aa;">Card with the card--pro modifier</p>
</div>
</div>In BEM, every part of a component gets its own class, so all the selectors carry the same low weight and don’t depend on the HTML structure.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Name classes after their role, not their appearance:
.alertsurvives a color change,.red-textdoesn’t. - Instead of lengthening the selector (
.sidebar .menu .item), give the element its own class. The rules stay shorter, and the specificity stays low and predictable. - In JavaScript you add and remove classes with
element.classList.add("active")orclassList.toggle(). It’s the simplest way to change the look of something in response to user action.
Related entries
#- #idSelects the element with the given identifier from its id attribute. It carries very high specificity, so its rules are hard to override later.
- Type selectorSelects every element with a given tag name, for example every p paragraph or every li list item.
- [attribute]Selects elements by an HTML attribute and its value: exact, starting, ending, a fragment, or a word from a list.
- SpecificityA selector’s weight, which decides which rule wins when several rules set the same property on the same element.
- A BA space between selectors selects B elements anywhere inside element A, at any depth.
- :not()Selects elements that match neither the given selector nor any selector in the list.
Spotted a mistake or missing an example? Write to us.