CSS Class Selector

Structure

.classname element1.classname .classname1.classname2

Description

The class selector selects elements which have the class attribute with a specific value. To select a class, you add a . to the beginning of the class-name. Multiple class-values can be combined, although there are .compatibility problems in IE7. If there is no element-name before the class-selector, it will be applied to every element with the matching class-name.

Examples

p.text {color:black;} 
/*<p> with the class "text"*/

a.external-link {text-decoration:underline;}  
/*An <a> with the class "external-link"*/

.example {background:gray;} 
/*Any element with the class "example"*/

.info.error {color:red;background:white;}  
/*The element has the classes "info" and "error"*/

.info .error {color:black;background:red;} 
/*An element with the class "error" inside an element with the class "info"*/

<!--How to add a class to an element -> use the class attribute:-->
<a class="link"></a>

<!--Multiple classes:-->
<p class="basic text main"></p>

Compatibility

Chrome	Firefox	Internet Explorer	Opera	Safari
Any	Any	Any	Any	Any

CSS Class Selector

Structure

Description

Examples

Compatibility

Follow & Subscribe

About us

Info