The class selector matches elements whose class attribute includes a given name. In CSS you write a dot, then the name: .spacious.
One class can style many elements. One element can have many classes (space-separated in HTML). Prefer clear, reusable names for components and states.
Not deprecated. Supported since the earliest CSS browsers; Baseline dating cites July 2015 for the modern web platform set.
.name matches the same elements as [class~="name"] for a single class token.
.class_name { /* styles */ }The name must be a valid CSS identifier. Unusual characters in HTML class values need escaping in the selector.
| Pattern | Description | Try it |
|---|---|---|
.note | Any element with that class | Try it |
| Multiple classes in HTML | class="red yellow-bg" applies both rules | Try it |
.a.b | One element that has both classes | Try it |
p.note | Only p elements with that class | Try it |
.a .b | Descendant: .b inside .a | Try it |
| Escaped name | Class values that need CSS escaping | Try it |
Name the class in HTML, then target it with a dotted selector in CSS.
class="name" (or several names) on the element(s)..name { … } in your stylesheet..a.b only when one element must have both classes.Toggle classes on the sample paragraph. Watch how .red, .yellow-bg, and .fancy stack.
Each snippet focuses on .class. Use Try It Yourself for a live editor.
.noteStyle every element that has the note class.
<style>
.note {
color: #b91c1c;
font-weight: 700;
}
</style>
<p class="note">Important tip.</p>
<p>Regular paragraph.</p>class="note" marks the first paragraph..note means “elements with that class.”class="note" to any tag to reuse the style.One element can take several class styles at once.
<style>
.red { color: #dc2626; }
.yellow-bg { background: #fef08a; }
</style>
<p class="red yellow-bg">Red text on yellow.</p>.class contributes its own properties.red or just yellow-bg..alert.okRequire both classes on the same element (no space between dots).
<style>
.alert {
padding: 0.5rem;
background: #fee2e2;
}
.alert.ok {
background: #dcfce7;
}
</style>
<p class="alert">Warning</p>
<p class="alert ok">Success</p>.alert alone. Gives the red-tint base..alert.ok (no space). Matches only when both classes are present.alert and ok..alert .ok (with a space) would mean nesting instead.Most class bugs are typos, case mismatches, or a missing/extra space between selectors.
.Btn will not style class="btn". Keep HTML and CSS spelling identical.
.a.b vs .a .bNo space = both classes on one element. A space = descendant combinator.
Names starting with a digit or containing ? need escaping (for example .\31 23item). Prefer simple letters, digits, hyphens.
Classes are reusable. An #id should be unique on the page and is more specific.
Use p.note so only paragraphs with that class match, not every tag.
The class selector (.class) is a browser CSS selector. Node.js, Deno, and Bun do not apply it.
Supported in all browsers, including classic Internet Explorer. Core CSS since CSS1.
Bottom line: Safe everywhere. Prefer readable class names over escaped oddities. It is not a runtime API.
.name matching class="name"..a.b means both on one node.One line: use .class to apply the same styles wherever you add that class in HTML.
Combine a tag name with a class for tighter matching.
8 people found this page helpful