ID Selector (CSS selector)
| IE7+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
| Version |
|---|
| CSS1 |
Example
This example selector matches any
element whose id attribute value is equal to
"breadcrumbs":
#breadcrumbs {
⋮ declarations
}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.
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
}Whitespace characters shouldn’t appear between the type selector and the ID selector.
Compatibility
| IE | 5.5 | Buggy |
|---|---|---|
| 6.0 | Buggy | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | 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.
User-contributed notes
- ID:
- #2
- Date:
- Fri, 01 Feb 2008 03:09:44 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
I agree with the above from kstrieby. Using passive voice, as in "white space characters musn't appear" doesn't make sense, since you are supposed to be talking to users/developers, people who will actively use this material. Passive voice sounds stilted and too formal.
Also, another clarity problem is "ith a class selector is unmatched," where you don't explain what "unmatched" means. I am not aware of that term and you don't put a glossary link.
- ID:
- #1
- 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.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
