Grow your CSS skills. Land your dream job.

ID

Last updated on:

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. Thomas Ongeri
    Permalink to comment#

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

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".