The CSS ID selector matches an element based on the value of the element’s id
attribute. In order for the element to be selected, its id
attribute must match exactly the value given in the selector.
/* The element with id="demo" */
#demo {
border: red 2px solid;
}
Syntax
#id_value { style properties }
Note that syntactically (but not specificity-wise), this is equivalent to the following attribute selector
:
[id=id_value] { style properties }
Examples
CSS
#identified {
background-color: skyblue;
}
HTML
<div id="identified">This div has a special ID on it!</div>
<div>This is just a regular div.</div>
Result
Specifications
Specification | Status | Comment |
---|---|---|
Selectors Level 4The definition of 'ID selectors' in that specification. | Working Draft | |
Selectors Level 3The definition of 'ID selectors' in that specification. | Recommendation | |
CSS Level 2 (Revision 1)The definition of 'ID selectors' in that specification. | Recommendation | |
CSS Level 1The definition of 'ID selectors' in that specification. | Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ID selector (#idName )
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 3 |
Opera
Full support 3.5 |
Safari
Full support 1 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
ID selectors by Mozilla Contributors is licensed under CC-BY-SA 2.5.