CSS Class Selector

The CSS class selector selects HTML elements that have a specific class name. Class selectors are reusable and can apply the same CSS declarations to multiple elements, including elements of different types.

Syntax

A class selector is written with a period (.) followed by the class name:

.class-name {
  property: value;
}

For example, the following selector matches every element with class="highlight":

.highlight {
  color: #0088cc;
}

How the Class Selector Works

The class selector matches elements whose class attribute contains the specified class name. The same class can be assigned to any number of elements in a document.

.notice {
  background-color: #d8f1fc;
  color: #0088cc;
}

The selector .notice matches each element that includes notice as one of its classes.

Using a Class on Multiple Elements

A class is not limited to a particular HTML element. The same class name can be used on different types of elements.

<h2 class="highlight">Important Heading</h2>
<p class="highlight">Important paragraph.</p>
<div class="highlight">Important content.</div>

The .highlight selector matches all three elements because each one contains the highlight class.

Multiple Classes

An HTML element can have more than one class. Class names in the class attribute are separated by whitespace.

<p class="notice important">Important notice</p>

The element can be selected by either class individually:

.notice {
  background-color: #d8f1fc;
}
.important {
  font-weight: bold;
}

To select elements that have both classes, place the class selectors together without a space:

.notice.important {
  color: #0088cc;
}

Combining with Other Selectors

A class selector can be combined with a type selector to restrict the match to a particular type of HTML element.

p.highlight {
  color: #0088cc;
}

This selector matches <p> elements with the highlight class but does not match other element types that use the same class.

Class selectors can also be combined with pseudo-classes, attribute selectors, combinators, and other selectors.

.navigation a:hover {
  text-decoration: underline;
}
.notice[data-level="important"] {
  font-weight: bold;
}

Specificity

A class selector contributes 0-1-0 to a selector's specificity. Each class selector contributes one value to the class column of the specificity value.

Selector	Specificity
`.highlight`	`0-1-0`
`p.highlight`	`0-1-1`
`.notice.important`	`0-2-0`
`#content .highlight`	`1-1-0`

Class selectors have greater specificity than type selectors and lower specificity than ID selectors.

Class Selector Example

The following example uses the .highlight class selector to style two elements. The final paragraph does not have the class and is not affected by the rule.

.highlight {
  background-color: #d8f1fc;
  color: #0088cc;
  font-weight: 600;
}

Play in Editor

Other basic selectors can select elements by element name, ID, or without restricting the element type:

Specifications

The class selector is defined in the Selectors Level 4 specification.

CSS Class Selector