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;
}

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

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1121 Yes Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic support Yes Yes Yes4 Yes Yes Yes

Document Tags and Contributors

 Last updated by: WillBeethoven,