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

CSS
.classname { style properties }

Note this is equivalent to the following attribute selector:

CSS
[class~=classname] { style properties }

Example

CSS

CSS
span.classy {
  background-color: DodgerBlue;
}

HTML

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ? ?

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/class_selectors

Beginner CSS CSS Reference Selectors