Class selectors

The CSS class selector matches elements based on the contents of their class attribute.

/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

/* All <li> elements with class="spacious" */
li.spacious {
  margin: 2em;
}

/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}

Syntax

.class_name { style properties }

Note that this is equivalent to the following attribute selector:

[class~=class_name] { style properties }

Example

CSS

.classy {
  background-color: skyblue;
}

HTML

<div class="classy">This div has a special class on it!</div>
<div>This is just a regular div.</div>

Result

Specifications

Browser compatibility