ID Selectors

CSS ID Selectors

A CSS ID selector selects an HTML element by the value of its id attribute. An ID identifies a particular element within a document and is useful when that element needs its own CSS styling.

ID Selector Syntax

An ID selector begins with a hash symbol (#) followed by the ID value. The hash symbol tells the browser that the selector represents an ID.

#intro {
  color: blue;
}

In this example, #intro selects the HTML element whose id attribute has the value intro.

The hash symbol is used only in the CSS selector. It is not included in the value of the HTML id attribute.

/* CSS */
#intro {
  color: blue;
}

/* HTML */
<p id="intro">This is the introduction.</p>

Adding an ID to HTML

The HTML id attribute assigns an identifier to an element. CSS can target that element by placing # before the ID value.

#important-message {
  padding: 10px;
  color: red;
  background-color: #f5f5f5;
}

<p>This is a regular paragraph.</p>
<p id="important-message">This is an important message.</p>

Only the element with id="important-message" matches the #important-message selector.

IDs Must Be Unique

An id value must be unique within an HTML document. Two elements on the same page should not use the same ID value.

<h2 id="contact">Contact Us</h2>
<p>Send us your questions or comments.</p>

The value contact identifies that particular heading. If another element needs to share the same styling, a class is generally more appropriate because class names are designed to be reused.

/* Do not duplicate an ID */
<p id="notice">First notice.</p>
<p id="notice">Second notice.</p>

/* Use a reusable class instead */
<p class="notice">First notice.</p>
<p class="notice">Second notice.</p>

ID Selectors vs Class Selectors

ID and class selectors both allow CSS to target elements using attribute values, but they serve different purposes. An ID identifies one particular element in the document, while a class can be shared by multiple elements.

#page-title {
  color: #333333;
}

.highlight {
  background-color: yellow;
}

<h1 id="page-title">Gardening Guide</h1>

<p class="highlight">Remember to water regularly.</p>
<p class="highlight">Check plants for pests.</p>

The ID identifies the individual page heading, while the class provides reusable styling for both highlighted paragraphs.

ID Selectors and Specificity

ID selectors have greater specificity than class selectors and element selectors. When competing declarations have the same origin and importance, this can cause a rule using an ID selector to take precedence.

#message {
  color: red;
}

.notice {
  color: green;
}

p {
  color: blue;
}

<p id="message" class="notice">This paragraph is red.</p>

All three selectors match the paragraph, but #message has greater specificity than .notice or p, so the red declaration takes precedence.

Because ID selectors have high specificity, using many of them for routine styling can make CSS overrides more difficult. Reusable styling is often better handled with classes.

Other Uses for IDs

The HTML id attribute is not used only for CSS. IDs can identify elements for links to locations within a page, associate certain form elements, and allow scripts to locate particular elements.

<a href="#contact">Go to Contact Information</a>

...

<h2 id="contact">Contact Information</h2>

In this example, the ID creates a target that can be reached by a link using href="#contact". The same ID could also be targeted by CSS with the selector #contact.

Choosing ID Names

ID values should clearly describe the element or its purpose. Names such as main-navigation, contact, and order-form are easier to understand than vague names such as thing1 or box2.

<section id="contact-information">
  ...
</section>

Using a consistent naming style also makes HTML and CSS easier to read and maintain. Lowercase names with hyphens between words are a common approach.

When to Use ID Selectors

An ID selector can be useful when CSS needs to target an element that already has a unique ID for a meaningful reason. However, IDs do not need to be the default choice for styling unique-looking elements.

Classes are generally more flexible for reusable styling and have lower specificity, making styles easier to override when necessary. IDs are especially useful when an element needs a unique identifier for purposes such as fragment links, form relationships, scripting, or other document-level identification.

Summary

CSS ID selectors begin with a hash symbol followed by an ID value, such as #intro. They match an HTML element whose id attribute contains that value, such as id="intro".

An ID value must be unique within the document, while classes can be reused on multiple elements. ID selectors also have greater specificity than class and element selectors. The next tutorial introduces the universal selector, which can match elements without specifying an element, class, or ID name.