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>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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1 | 12 | 1 | Yes | Yes | Yes |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
Document Tags and Contributors
Tags:
Contributors to this page:
JonathanPool,
WillBeethoven,
fscholz,
wbamberg,
mfluehr,
erikadoyle,
Sebastianz,
cvrebert,
chrisdavidmills,
dagolinuxoid,
MusikAnimal,
SphinxKnight,
FredB,
pablofiumara,
teoli,
Sheppy,
ethertank,
sii,
miken32
Last updated by:
JonathanPool,