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

Specification	Status	Comment
Selectors Level 4 The definition of 'class selectors' in that specification.	Working Draft	No changes
Selectors Level 3 The definition of 'class selectors' in that specification.	Recommendation
CSS Level 2 (Revision 1) The definition of 'child selectors' in that specification.	Recommendation
CSS Level 1 The definition of 'child selectors' in that specification.	Recommendation	Initial definition

Browser compatibility