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 class="foo classy bar">Elements can have multiple classes and the class selector still works!</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 AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes4 Yes Yes Yes

Document Tags and Contributors

Last updated by: leaverou,