CSS .class Selector
Example
Select and style all elements with class="intro":
.intro {
background-color: yellow;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS .class selector selects elements with a specific class attribute
value.
To select all kinds of elements with a specific class, write a period (.) character, followed by the class attribute value.
The element.class selector selects the specified elements
with the specified class attribute value.
To select only one type of elements with a specific class, write the element name, then a period (.) character, followed by the class attribute value (look at Example 1 below).
Tip: HTML elements can also refer to more than one class (look at Example 2 below).
| Version: | CSS1 |
|---|
Browser Support
| Selector | |||||
|---|---|---|---|---|---|
| .class | Yes | Yes | Yes | Yes | Yes |
CSS Syntax
CSS Syntax
More Examples
Example 1
Select and style all <p> elements with class="intro":
p.intro {
background-color: yellow;
}
Try it Yourself »
Example 2
Different use of the .class selector:
/* selects all elements with class="center" */
.center {
text-align:
center;
}
/* selects all <p>
elements with class="large" */
p.large {
font-size: 200%;
}
/*
selects all <p> elements with a class list that includes
"fancy" and "beige" */
p.fancy.beige {
font-family: 'Courier
New', monospace;
background-color: beige;
border: 2px
solid green;
}
/* selects all elements with class="ex2", inside <p>
elements with class="ex1" */
p.ex1 .ex2 {
background-color:
yellow;
}
Try it Yourself »
