CSS Selector - How to use CSS class selector .class

The .class selector adds style for all elements with the specified class.

A class selector uses "dot notation" to select elements that have a class containing a specific value or values.

The name of the class value must immediately follow the dot.

Multiple class values can be chained together.

element1.classname element1.classname1.classname2

If no element name precedes the dot, then the selector matches all elements containing that class value or values.


p.urgent {color: black;}
a.external {font-style: italic;}
.example {background: red;}
.note.caution {background: yellow;}


CSS Version

CSS Syntax

.classname { 
   style properties 

Browser compatibility

.class Yes Yes Yes Yes Yes


An example showing how to use .class CSS selector

<!DOCTYPE html>
.grayStyle<!--from   ww  w  . ja v a 2  s. c  o m-->

   <p class="grayStyle">java2s.com.</p>

Click to view the demo