ID Selector (CSS selector)

Spec
Version
CSS1
Browser support (more…)
IE7+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

#ID {
declaration block
}

Description

An ID selector matches an element that has a specific id attribute value. Since id attributes must have unique values, an ID selector can never match more than one element in a document.

Note: ID, Please!

By ID attribute, the CSS specification doesn’t necessarily refer to an attribute whose name is id. An ID attribute is one whose type is declared as ID in the document type definition (DTD), or similar, for the markup language. In HTML (and XHTML), this selector matches the id attribute, but in XML it would apply to any attribute for which a type of ID was specified.

Since attribute types are declared in a DTD or schema—information that user agents don’t normally read—ID selectors shouldn’t be used for XML other than XHTML, unless you know that user agents have built-in knowledge about ID attributes.

In its simplest form, an ID selector looks like this:

#navigation {
  ⋮ declarations
}

This selector matches any element whose id attribute value is equal to "navigation". In this selector, which is equivalent to *#navigation, the universal selector is implied. The universal selector is often omitted in cases like this.

Of course, it’s possible to use a type selector with an ID selector, but it’s rarely necessary, since an ID uniquely identifies an element. Here’s an example that only matches an unordered list element with an id attribute value that’s equal to "navigation":

ul#navigation {
  ⋮ declarations
}

There must be no whitespace characters between the type selector and the ID selector.

Example

This example selector matches any element whose id attribute value is equal to "breadcrumbs":

#breadcrumbs {
  ⋮ declarations
}

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

In Internet Explorer 6, an ID selector is ignored unless it’s the last ID selector in the simple selector.

In Internet Explorer versions up to and including 6, if an ID selector that’s combined with a class selector is unmatched, all subsequent ID selectors that use the same ID and are combined with a class selector, are also treated as unmatched.

Previous / Next page

  1. Previous
  2. Next

User-contributed notes

ID:
#3
Contributed:
by Paul O'B
Date:
Thu, 08 Jul 2010 08:37:57 GMT

The first compatibility note "In Internet Explorer 6, an ID selector is ignored unless it’s the last ID selector in the simple selector." needs clarification or removal s it doesn't seem to apply here.

The second compatibility note "In Internet Explorer versions up to and including 6, if an ID selector that’s combined with a class selector is unmatched, all subsequent ID selectors that use the same ID and are combined with a class selector, are also treated as unmatched." is not quite correct as IE6 will ignore all subsequent id.classname selectors whether the first is matched or not.

ID:
#1
Contributed:
by kstrieby
Date:
Thu, 06 Dec 2007 02:07:49 GMT

I think I would prefer to see stronger, less informal language in this guide. An example in this article is this:

"Whitespace characters mustn’t appear..."

If you might write "Whitespace characters must not appear...", it's more forceful. (Having said that, are we assuming that whitespace characters might somehow appear in your CSS all by themselves? <grin>)

From that standpoint, if you flip the sentence's subject around, and say something like "You can not insert whitespace characters...", it makes the statement both clearer *and* more forceful.

Related Products