CSS .class Selector

❮ Previous CSS Selectors Reference Next ❯

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 .class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the name of the class.

You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.) character, followed by the name of the class (look at Example 1 below).

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

.class {
css declarations;
} Demo

More Examples

Example 1

Style all <p> elements with class="hometown":

p.hometown {
background-color: yellow;
}

Try it Yourself »

Example 2

This <p> element will be styled according to class="center" AND to class="large":

<p class="center large">This paragraph refers to two classes.</p>

Try it Yourself »

❮ Previous CSS Selectors Reference Next ❯