CSS ID Selector: Syntax, Usage, and Examples

The CSS ID selector targets an HTML element based on its unique id attribute. It allows you to apply styles to a specific element on the page, making it a powerful tool when you need to override general styles or target one particular item. The ID selector CSS is quick to implement and essential for fine-grained control over your layout and design.

How to Use the CSS ID Selector

The syntax is simple: use a hash symbol (#) followed by the ID name.

#element-id {
  property: value;
}

This rule applies styles to any HTML element with the matching id.

Example:

#main-title {
  color: darkblue;
  font-size: 32px;
}

And in the HTML:

<h1 id="main-title">Welcome to the Site</h1>

Only this heading will receive the defined styles. The id must be unique—each value should appear only once per page.

When to Use the ID Selector CSS

Use the ID selector when you need to apply styles to a single, specific element. It's especially useful in situations where:

You Need to Override More General Styles

ID selectors have high specificity, so they can override class or element selectors easily.

/* This is more specific than the class selector */
#alert {
  color: red;
  font-weight: bold;
}

You're Styling Dynamic Components

In JavaScript-heavy apps, you may generate or update components using IDs. Styling them with an ID selector provides a clear, stable target.

You're Targeting Unique Page Elements

Headers, footers, modals, or specific sections often have unique IDs for accessibility and linking. Styling them directly is efficient and readable.

#footer {
  background-color: #222;
  color: #fff;
  padding: 20px;
}

Examples of CSS ID Selector in Action

Styling a Banner

#banner {
  background: url('banner.jpg') no-repeat center;
  height: 300px;
  text-align: center;
  color: white;
}

<div id="banner">
  <h1>Sale Ends Soon!</h1>
</div>

Only this banner receives the defined background and text styling.

Overriding a General Rule

p {
  font-size: 16px;
}

/* Specific override using ID */
#intro {
  font-size: 20px;
}

<p id="intro">This introduction paragraph stands out.</p>

This lets you customize just one paragraph without affecting all others.

Targeting Elements with JavaScript and CSS

If your script toggles visibility for an element using its ID, it’s practical to style it using the same selector:

#popup {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid #ccc;
}

#popup.active {
  display: block;
}

JavaScript toggles the active class, while the ID defines the base styles.

Learn More About the ID Selector in CSS

Specificity of CSS Selectors by ID

ID selectors are among the most specific in CSS. Their specificity score is higher than class selectors or element selectors.

• Type (element) selectors: div, p, h1 → specificity score: 0-0-1
• Class selectors: .container, .nav → specificity score: 0-1-0
• ID selectors: #header, #main → specificity score: 1-0-0

That means styles applied via an ID will override those applied via a class—even if they appear earlier in the stylesheet.

Combining ID Selectors with Other Selectors

You can chain an ID with element or class selectors for even more precise control:

div#profile {
  padding: 10px;
  background-color: #f0f0f0;
}

#profile.avatar {
  border-radius: 50%;
}

This is helpful when your HTML structure combines reusable components with unique targets.

CSS Selector for ID Best Practices

Although ID selectors are powerful, they should be used sparingly in modern development, especially in large applications or component-based systems. Here’s why:

• IDs must be unique, which can be limiting in repeated components.
• Overusing them can lead to specificity wars, where styles become difficult to override.
• Some CSS methodologies (like BEM) recommend classes only to keep styles maintainable.

That said, they’re still ideal for unique elements like headers, sidebars, or modal windows.

Using ID Selectors in Forms

When building forms, the ID selector helps link <label> elements to inputs:

<label for="email">Email Address</label>
<input type="email" id="email" name="email">

You can also style the input directly:

#email {
  border: 2px solid #007BFF;
}

This ensures consistency and accessibility while keeping your styles clean.

CSS Selectors by ID in Media Queries

You can use ID selectors within media queries to adjust styles for specific elements on different screen sizes:

@media (max-width: 600px) {
  #hero {
    height: 200px;
    font-size: 24px;
  }
}

This lets you control layout without introducing extra classes.

Targeting Multiple IDs

Unlike classes, you can't group IDs under a single selector like #one, #two. Each must be written out explicitly:

#section1,
#section2,
#section3 {
  margin-bottom: 30px;
}

Use this method when applying the same style to several unique elements.

Styling Anchor Targets with IDs

IDs are commonly used for in-page anchors:

<a href="#features">View Features</a>

<section id="features">...</section>

You can style these anchor targets for smoother transitions or better visibility:

#features {
  scroll-margin-top: 80px;
}

This makes sure the section aligns well with sticky headers when scrolled into view.