Class Selectors

CSS Class Selectors

A CSS class selector selects HTML elements that have a particular class attribute value. Classes are useful when you want to apply the same styles to selected elements without styling every element of the same type.

Class Selector Syntax

A class selector begins with a period (.) followed by the class name. The period tells the browser that the selector represents a class.

.notice {
  color: blue;
}

In this example, .notice selects elements whose class attribute contains the class name notice.

The period is used only in the CSS selector. It is not included in the HTML class attribute.

/* CSS */
.notice {
  color: blue;
}

/* HTML */
<p class="notice">This is a notice.</p>

Adding a Class to HTML

The HTML class attribute assigns one or more class names to an element. A CSS class selector can then target elements containing that class name.

.highlight {
  background-color: yellow;
}

<p>This is a regular paragraph.</p>
<p class="highlight">This paragraph is highlighted.</p>

Only the second paragraph has the highlight class, so only that paragraph receives the yellow background.

Reusing Classes

The same class name can be assigned to multiple HTML elements. Every element containing that class can receive the styles defined by the class selector.

.important {
  color: red;
  font-weight: bold;
}

<p class="important">Important paragraph.</p>
<p>Regular paragraph.</p>
<p class="important">Another important paragraph.</p>

This ability to reuse classes is one of their most useful features. A single CSS rule can provide consistent styling to many elements throughout a page.

Using a Class on Different Elements

A class is not limited to one type of HTML element. The same class can be assigned to different elements when they should share a style.

.featured {
  color: #0088cc;
}

<h2 class="featured">Featured Heading</h2>
<p class="featured">Featured paragraph.</p>

Both elements contain the featured class, so the class selector applies to both.

Using Multiple Classes

An HTML element can have more than one class. Multiple class names are written inside the same class attribute and separated by spaces.

.notice {
  padding: 10px;
}

.warning {
  color: red;
  font-weight: bold;
}

<p class="notice warning">This is an important warning.</p>

The paragraph belongs to both the notice and warning classes, so declarations from both class rules can apply to it.

Combining an Element and Class Selector

An element selector and a class selector can be written together with no space between them. This selects elements of that specific type that also have the specified class.

p.notice {
  color: blue;
}

<p class="notice">This paragraph matches.</p>
<div class="notice">This div does not match.</div>

The selector p.notice matches <p> elements that have the notice class. The <div> also has the class, but it does not match because it is not a paragraph.

Notice that p.notice contains no space. A space has a different meaning in CSS selectors and is covered later in the Descendant Selectors tutorial.

Choosing Class Names

Class names should be meaningful enough to make their purpose understandable when reading the HTML and CSS. Names such as notice, featured, or product-title usually communicate more than vague names such as thing or item1.

<p class="warning-message">Please complete all required fields.</p>

Class names are case-sensitive in CSS matching for HTML class values in normal standards-mode documents, so it is best to use a consistent naming style. Lowercase names with hyphens between words are common and easy to read.

When to Use Class Selectors

Class selectors are a good choice when a style should apply to selected elements rather than every element of a particular type. They are especially useful when the same style needs to be reused in several places.

For example, an element selector such as p can establish the default appearance of all paragraphs, while a class such as .notice can provide additional styling only to paragraphs that need special treatment.

p {
  line-height: 1.6;
}

.notice {
  padding: 10px;
  background-color: #f5f5f5;
}

Classes are reusable and flexible, which makes them one of the most commonly used ways to target HTML elements with CSS.

Summary

CSS class selectors begin with a period followed by a class name, such as .notice. The corresponding HTML uses the class name without the period, such as class="notice".

The same class can be reused on multiple elements, different types of elements can share a class, and an element can contain multiple classes. When a style needs to target one uniquely identified element, an ID selector provides another option and is covered in the next tutorial.