ID Selectors

An id value may appear on only one element in a page. The HTML standard requires this, which makes an ID the name of exactly one element, while a class is a name that many elements can share.

An ID selector is a hash sign followed by the ID. The rule #page-title matches the element whose id attribute is page-title.

#page-title {
  color: darkgreen;
  border-bottom: 3px solid darkgreen;
}

The border-bottom declaration draws a 3px line under the element; the chapter on the box model covers borders.

Adding IDs to the Hiking Page

The page below gives the heading the ID page-title and the first paragraph the ID intro. The first paragraph also has the important class from the previous lesson.

<!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>
    #intro {
      background-color: darkgreen;
    }

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

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

    #page-title {
      color: darkgreen;
      border-bottom: 3px solid darkgreen;
    }
  </style>
</head>
<body>
  <h1 id="page-title">A Beginner's Hiking Guide</h1>
  <p id="intro" class="important">Pick a short trail for your first walk.</p>
  <p class="important">Carry more water than you think you need.</p>
</body>
</html>

The browser computed these values:

h1#page-title          color rgb(0, 100, 0)      border-bottom 3px   height 40px
p#intro.important      color rgb(255, 255, 255)  background rgb(0, 100, 0)
p.important            color rgb(255, 255, 255)  background rgb(139, 0, 0)

The heading is 40px tall: 37px for the text line and 3px for the border. The first paragraph has a dark green background, while the second keeps dark red. Yet the #intro rule comes first in the style sheet and the .important rule comes after it. The previous lesson showed that a later class rule beats an earlier class rule, so why does the earlier ID rule win here?

How the Browser Chooses Between Rules

Three rules match the first paragraph, and two of them set its background. The browser settles each property in the following order.

1. It collects every rule that matches the element and sets the property.
2. It compares the selectors of those rules by weight, which is called specificity. Each selector gets three counts: the number of IDs, then the number of classes, then the number of element names. The selector with the larger first count wins; only on a tie does the browser compare the second count, and then the third.
3. Only when two selectors have exactly the same counts does the later rule in the style sheet win.

For the paragraph's background, the counts are as follows.

p            0 IDs, 0 classes, 1 element   ->  (0, 0, 1)
.important   0 IDs, 1 class,   0 elements  ->  (0, 1, 0)
#intro       1 ID,  0 classes, 0 elements  ->  (1, 0, 0)

The #intro selector has one ID and the others have none, so it wins the background at step 2, and its position in the file never matters. For the text color, only p and .important compete, so .important wins with its one class, and the paragraph stays white. This is the reason, promised in the previous lesson, that the class color beat the p color.