Grokking CSS for Web Development
Vote

0% completed

​

Class Selectors

Marking Elements With a Class

One Element, Several Classes

When Two Classes Disagree

Class Names Are Case-Sensitive

Naming a Class

Two paragraphs on the hiking page use the same <p> element, but only one of them is a safety warning. A p rule cannot tell them apart, because both elements have the same name. A class can: you give the warning paragraph a name of your choice in its class attribute, and then you write a rule for that name.

A class selector is a period followed by a class name. The rule .important matches every element whose class attribute contains the word important, whatever kind of element it is.

.important {
  color: white;
  background-color: darkred;
  padding: 4px 8px;
}

The padding declaration adds space between the text and the edge of its background; a later chapter explains it in detail.

Marking Elements With a Class

Here is the hiking page from the previous lesson with the class added to one paragraph and one list item.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hiking Guide</title>
  <style>
    h1 {
      color: darkgreen;
      margin-bottom: 8px;
    }

    p {
      color: #333333;
      font-size: 18px;
    }

    .important {
      color: white;
      background-color: darkred;
      padding: 4px 8px;
    }
  </style>
</head>
<body>
  <h1>A Beginner's Hiking Guide</h1>
  <p>Pick a short trail for your first walk.</p>
  <p class="important">Carry more water than you think you need.</p>
  <ul>
    <li class="important">Water</li>
    <li>Map</li>
    <li>Rain jacket</li>
  </ul>
  <div>
    <p>Check the weather the night before.</p>
  </div>
</body>
</html>

The browser matched two elements of different kinds, a paragraph and a list item, because the rule asks only about the class. Here is what it computed:

p                    color rgb(51, 51, 51)     background transparent   font-size 18px
p.important          color rgb(255, 255, 255)  background rgb(139, 0, 0) font-size 18px
li.important         color rgb(255, 255, 255)  background rgb(139, 0, 0) font-size 16px
li (Map)             color rgb(0, 0, 0)        background transparent   font-size 16px

Two details in that output deserve attention. First, the important paragraph still has a font size of 18px. The browser decides each property separately, so the p rule still supplies the size because the class rule does not set one. Second, two rules set a color for that paragraph, p asks for #333333 and .important asks for white, and white wins. The lesson on ID selectors later in this chapter explains how the browser chooses between rules like these.

The padding also changed the size of the box. The important paragraph is now 29px tall instead of 21px, because 4px of padding sits above the text and 4px below it.

One Element, Several Classes

The class attribute holds a list of names separated by spaces. An element matches the selector for each name in its list. The following rule adds a second class that only enlarges text.

.large {
  font-size: 24px;
}
<p class="important large">Carry more water than you think you need.</p>

That paragraph now matches both .important and .large, so it gets the white text on dark red and the 24px size. Splitting styles into small classes like this lets you combine them in the HTML instead of writing a new rule for every combination.

The class attribute is a list of names, and each class selector matches any element whose list contains its name.
The class attribute is a list of names, and each class selector matches any element whose list contains its name.

The diagram shows each element's list of class names next to the selectors that match it. Notice that an element without the name in its list is never matched, even when it is the same kind of element.

When Two Classes Disagree

If two classes on one element set the same property, the order of the names in the attribute makes no difference. The order of the rules in the style sheet decides instead.

.large {
  font-size: 24px;
}

.small {
  font-size: 14px;
}
<li class="large small">Rain jacket</li>
<p class="small large">Check the weather the night before.</p>

Both elements are computed at 14px. The .small rule appears later in the style sheet, and when two class rules compete for the same property, the later one wins. Writing the names as small large instead of large small changes nothing.

Class Names Are Case-Sensitive

Unlike element names, class names must match exactly. A rule written as .Tip does not match an element with class="tip". Pick one style for names, usually lowercase words joined by hyphens such as trail-card, and use it everywhere.

Naming a Class

A class name can describe what the element is, such as important or warning, or what it looks like, such as text-red. A name based on purpose keeps working when the design changes: if warnings become orange next year, .warning still makes sense, while .text-red would then describe the wrong color. Classes based on looks are still common in some projects because they are quick to reuse, so the choice depends on how the team works.

Classes are the selector you will use most. They can be reused on any number of elements, and they do not depend on which element the HTML author chose.

Reading Progress

0%

Vote for new content

On This Page

Marking Elements With a Class

One Element, Several Classes

When Two Classes Disagree

Class Names Are Case-Sensitive

Naming a Class