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
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 | ? | ? | ? | ? | ? | ? |
Document Tags and Contributors
Tags:
Contributors to this page:
Sebastianz,
cvrebert,
chrisdavidmills,
dagolinuxoid,
MusikAnimal,
SphinxKnight,
FredB,
pablofiumara,
teoli,
Sheppy,
ethertank,
sii,
Miken32
Last updated by:
Sebastianz,