What You’ll Learn

The #id selector styles a single element by its unique id attribute. It is one of the most specific basic selectors in CSS.

Introduction

The CSS #id selector is used to style an element based on its unique id attribute. IDs are meant to be unique within a webpage, and this selector lets you target one specific element by its id value.

This provides a precise way to apply styles to a single element, distinguishing it from other elements that may share the same tag or class.

Definition and Usage

In CSS, prefix the id name with a hash (#): #main-title, #header, or #highlight. The HTML element must have a matching id attribute: id="main-title".

📝 Syntax

The syntax for the #id selector is:

#elementID {
  /* CSS properties */
}

• #elementID refers to the id of the HTML element you want to style.
• In CSS, the id selector is prefixed with # followed by the id name (no quotes).
• In HTML, the id is set with id="elementID" on the opening tag.

Basic Example

#main-title {
  font-size: 2rem;
  color: #1e3a8a;
  text-align: center;
}

#highlight {
  background-color: #fef9c3;
  font-weight: 700;
  padding: 0.5rem;
}

ID vs Class vs Element

Syntax Rules

• Each id must be unique on the page — never duplicate it.
• Id names are case-sensitive: #Header and #header are different.
• Combine with elements: div#wrapper targets a div with that id.
• Ids cannot contain spaces; use hyphens for multi-word names: main-content.
• Do not include the # in the HTML id attribute — only in CSS.

Related Selectors

• .class — targets multiple elements sharing a class name
• element — targets all elements of a tag type
• [attribute] — targets elements with a given attribute
• #id .class — descendant: class inside a specific id container
• #id > element — direct child inside an id container

When to Use #id

#id is best for unique, one-of-a-kind elements:

• Page landmarks — Style #header, #footer, or #main-content once per layout.
• Single highlighted block — Emphasize one special paragraph or callout with #highlight.
• Anchor targets — Link to a section with <a href="#section-id"> and style that section.
• JavaScript hooks — When scripts need a reliable single-element reference.
• Unique widgets — One search box, one hero banner, or one modal container.

Examples Gallery

Practice #id with page titles, highlighted text, unique headers, and id vs class specificity.

<style>
  #main-title {
    font-size: 2rem;
    color: #1e3a8a;
    text-align: center;
  }
  #highlight {
    background: #fef9c3;
    font-weight: 700;
    padding: 0.5rem;
  }
</style>

<h1 id="main-title">Welcome to My Blog</h1>
<p>This is a paragraph about the blog.</p>
<p id="highlight">This paragraph is uniquely styled.</p>

#site-header {
  background: #1e3a8a;
  color: #fff;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#site-header h1 {
  margin: 0;
  font-size: 1.25rem;
}

.text {
  color: #64748b;
}

#special {
  color: #dc2626;
  font-weight: 700;
}

#email {
  width: 100%;
  max-width: 20rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid #2563eb;
  border-radius: 0.4rem;
  font-size: 0.875rem;
}

label[for="email"] {
  font-weight: 600;
  color: #1e3a8a;
}

💬 Usage Tips

• Uniqueness — Never assign the same id to multiple elements; it breaks CSS, accessibility APIs, and JavaScript lookups.
• High specificity — #id overrides .class and element selectors. Use this power deliberately, not excessively.
• Reserve for unique cases — Use ids for #header, #footer, or anchor targets; use classes for reusable styles.
• Meaningful names — Choose descriptive, hyphenated ids like main-content instead of vague names like div1.
• Label association — Pair form field ids with <label for="id"> for accessibility.

⚠️ Common Pitfalls

• Duplicate ids — Multiple elements with the same id produce invalid HTML and unpredictable styling.
• Overusing ids — Styling everything with ids makes CSS rigid and hard to maintain; prefer classes for shared styles.
• Specificity wars — Heavy id usage forces you to add more ids or !important to override styles later.
• Hash in HTML — Write id="header" in HTML and #header in CSS — do not put # in the attribute.
• Starting with a digit — Id names should start with a letter; avoid id="1section".

♿ Accessibility

• Skip links — Use id="main-content" as a target for “Skip to content” navigation links.
• Form labels — Connect <label for="email"> to <input id="email"> so screen readers announce the field name.
• ARIA vs id — Ids hook labels and ARIA references (aria-labelledby); do not rely on id alone for semantics.
• Landmark regions — Prefer semantic tags (<header>, <main>) plus ids only when needed for navigation.
• Unique requirement — Duplicate ids break assistive technology that references elements by id.

💡 Best Practices