ID Selectors: Unique Identifiers and Specificity Pitfalls

Learn about CSS ID Selectors. Understand uniqueness rules, differences between classes and IDs, and specificity traps.

Introduction

If you look at a passport number, it belongs to exactly one citizen. It would make no sense for two people to share a passport number.

In HTML and CSS, ID Selectors behave exactly like these unique passports. An ID is used to target a single, unique element on a page. While ID selectors are powerful and have the highest specificity weighting among simple selectors, overusing them can lead to rigid, unscalable stylesheets that are difficult to debug.

What You Will Learn

How to write ID selectors in CSS.
The W3C rule of uniqueness for ID attributes.
The key differences between Class and ID selectors.
Why using IDs for styling is often considered a "Specificity Trap."
How IDs enable HTML Anchor Link navigation.

Prerequisites

Class Selectors: Reusable Utility Styles and Naming Standards

Detailed Explanation: ID Syntax & Rules

In HTML, you declare an ID using the id attribute. In CSS, you target an ID by prefixing the name with a hash (#):

<!-- HTML -->
<nav id="main-navigation">...</nav>

/* CSS */
#main-navigation {
  background-color: #0f172a;
  padding: 15px;
}

Note: Just like classes, do NOT write the hash inside the HTML attribute (e.g. id="#main-navigation" is incorrect). The hash is only used in the CSS file.

The Rule of Uniqueness

According to W3C standards:

An ID must be unique within an HTML document. You cannot have two elements with the same ID on a single page.
If you have two elements with id="contact-btn", your HTML is invalid. Although browsers will often still render the styles on both buttons, JavaScript APIs (like document.getElementById()) will fail, returning only the first button.

Class vs. ID Comparison

The Specificity Trap

Because ID selectors have a very high specificity weight (100 vs. 10 for classes), they are extremely difficult to overwrite. If you write:

#header { background: red; }
.blue-header { background: blue; }

An element <div id="header" class="blue-header"> will remain red, even though the class is written later in the code. To change it, you must write another ID rule, leading to a cascade of highly specific code that cannot be easily customized.

Industry Rule: Use class selectors for styling. Use ID selectors for JavaScript targeting and HTML anchor linking.

Visual Learning Diagram (Mermaid)

graph TD
    subgraph Specificity Weighting
    A[ID Selector #card: Weight 100] -->|Overwrites| B[Class Selector .card: Weight 10]
    B -->|Overwrites| C[Element Selector div: Weight 1]
    end

Code Examples

Example 1: Standard ID Navigation Bar

Let's see how an ID targets a unique layout element:

<!-- index.html -->
<header id="global-header">
  <div class="logo">VSNEXOS</div>
  <button id="cta-button" class="btn btn-primary">Apply Now</button>
</header>

/* style.css */

/* Target the unique header container */
#global-header {
  background-color: #1e293b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 40px;
}

/* Target the unique action button */
#cta-button {
  box-shadow: 0 4px 6px -1px rgba(56, 189, 248, 0.4);
}

Example 2: HTML Anchor Linking

IDs double as landing anchors. Clicking a link pointing to #section-id scrolls the browser window directly to that element:

<!-- Clickable Link -->
<a href="#placement-stats">View Placements</a>

<!-- Target Section located lower on the page -->
<section id="placement-stats">
  <h2>Our Placement Statistics</h2>
  <p>Over 95% of our graduates secure engineering roles.</p>
</section>

Summary

ID selectors use the hash (#) prefix and must target a single, unique element per HTML page. While highly effective for JavaScript hooks and anchor navigation links, they introduce high specificity scores that overwrite class rules, so developers avoid using them as their primary CSS styling tool.

Next Tutorial

How do we target every single element on a page to apply global resets? Let's check: Universal Selector.

← Back to Syllabus