Class selectors

Class selectors

In an HTML document, CSS class selectors match an element based on the contents of the element's class attribute. The class attribute is defined as a space-separated list of items, and one of those items must match exactly the class name given in the selector.

Syntax

.classname { style properties }

Note this is equivalent to the following attribute selector:

[class~=classname] { style properties }

Example

CSS

span.classy {
  background-color: DodgerBlue;
}

HTML

<span class="classy">Here's a span with some text.</span>
<span>Here's another.</span>

Specifications

Browser compatibility