ID

The #id selector allows you to target an element by referencing the id HTML attribute. Similar to how class attributes are denoted in CSS with a “period” (.) before the class name, ID attributes are prefixed with an “octothorpe” (#), more commonly known as a “hash” or “pound sign”.

<header id="site-header"></header>
#header { /* this is the ID selector */
  background: #eee;
}

ID attribute values should be unique. HTML with two or more identical ids does not validate, and will produce unpredictable results. If there are two of the same, CSS will still match and style both. JavaScript however, when querying for an ID, will find the first and stop.

ID selectors are extremely powerful. They have a very high specificity, generally written as (0, 1, 0, 0). Styles applies with them override other selectors that only use tags or classes. To demonstrate:

Check out this Pen!

A paragraph with both an ID and class attribute is being given contradicting CSS rules; even though the class selector (.reusable) is below the ID selector (#unique) in the CSS (it would generally overrides styles above it in the “cascade”), the paragraph stays red because #unique overwhelms the blue color being set by .reusable. An infinite amount of classes can never beat the specificity of the ID (although there was a bug at one time where 256 classes would beat an ID).

High specificity and uniqueness mean using #id is a CSS “nuclear option”: over-powered, inflexible and disproportionately effective. Avoiding the #id selector in CSS is considered a best practice: it is preferable to use a class in nearly every case.

That being said, ID attributes have several valuable uses outside of CSS:

  • Providing unique hooks for JavaScript
  • Elements with id attributes can be targeted by anchor tags, by setting the href attribute to the id value, prefixed by a # symbol. Clicking that anchor link will re-focus the current page on the element with the matching id. This is called a “fragment identifier”.
  • For truly unique elements in your HTML, such as form elements, IDs could be useful for things like linking labels and inputs.

Points of Interest

  • A valid #id cannot start with a number and must be at least one character long. A large part of the Unicode are valid characters in an id.
  • id attributes and selectors are case-sensitive, and must exactly match across HTML, CSS and JavaScript

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any Any Any Any Any Any Any

Comments

  1. User Avatar
    Thomas Ongeri
    Permalink to comment#

    The ID is site-header, above the idea is labeled as #header.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag