Previous
Written by: rJTutorial Team | Last Updated:

CSS ID Selector

The ID selector is one of the most precise ways to target an HTML element. In CSS, it allows you to apply styles to a single, unique element by referencing its id attribute. To define an ID selector, you use the hash symbol (#) followed by the name of the ID.

Unlike classes, which can be reused across dozens of elements, an ID is meant to be a "one-of-a-kind" identifier within a single HTML document. Because of this uniqueness, the ID selector has a very high specificity, meaning its styles will usually override styles coming from class or element selectors.

Basic Syntax:

#elementId {
  /* CSS declarations */
}

For example, if you are building a website and have a specific section for your main navigation menu, you might give it an id="main-nav". You can then style it specifically like this:

CSS Example:

#main-nav {
  background-color: #2c3e50;
  height: 80px;
  display: flex;
  align-items: center;
}

This rule ensures that the styling is applied only to that specific navigation bar and nothing else on the page.

Common Mistake: Reusing the same ID on multiple elements. While your CSS might still "work" in some browsers, it breaks HTML validation and will cause major issues when you try to use JavaScript to interact with that element.

When to Use ID Selectors

In modern web development, ID selectors are typically reserved for major structural components that only appear once on a page, such as a #header, #footer, or a #main-content wrapper. They are also incredibly useful as "anchors" for linking to specific parts of a page.

Developer Tip: Use IDs for "jump links." If you have an element with id="contact-us", you can create a link <a href="#contact-us"> that automatically scrolls the user down to that section when clicked.

HTML

<div id="hero-banner">
  <h1>Welcome to Our Site</h1>
</div>

CSS

#hero-banner {
  background-image: url('hero.jpg');
  color: white;
  text-align: center;
  padding: 100px 0;
}
Watch Out: ID selectors have very high specificity. If you style an element with an ID and later try to override it with a class, the class styles will be ignored. This can make your CSS difficult to debug as your project grows.

Best Practices for Modern CSS

While IDs are powerful, the trend in modern CSS architecture (like BEM or Utility-first CSS) is to favor classes for styling and reserve IDs for JavaScript hooks and accessibility landmarks.

Best Practice: Avoid using IDs for general styling. Instead, use classes (e.g., .button-primary instead of #submit-button). This keeps your CSS reusable and prevents "specificity wars" where you're constantly fighting to override previous styles.

To summarize: use the ID selector when you need to target a single, unique element that requires specific positioning or behavior, but lean on classes for styles you might want to share with other elements later.

Previous