CSS Selectors
CSS ID Selector
Understand how ID selectors target unique elements, why their high specificity is difficult to override, and when another selector is preferable.
The CSS ID Selector is used to style a specific HTML element with a unique ID.
Unlike class selectors, an ID is meant to be used only once per page, making it ideal for targeting a single, unique element.
Each ID must be unique within an HTML document.
ID selectors are defined using a hash (#) followed by the ID name. The supporting concepts are explained in CSS Class Selector and CSS Specificity.
ID Selector Syntax
css
#idname {
property: value;
}ID Selector Example
css
#header {
color: blue;
text-align: center;
}👉 This will apply styles to the element with id="header".
Attributes
| Property | Description | Example |
|---|---|---|
| color | Sets text color | color: red; |
| background | Sets background color | background: yellow; |
| text-align | Aligns text | text-align: center; |
| padding | Adds inner spacing | padding: 15px; |
| border | Adds border | border: 2px solid black/ |
ID selectors and specificity
An HTML ID is valuable for labels, fragments, and scripting, but using it as a styling hook adds an ID to the strongest specificity column. Component overrides then require another ID or a higher-priority cascade mechanism. Prefer a class for appearance and reserve the ID for identity. If legacy CSS contains ID selectors, place overrides in a deliberate layer rather than escalating selector weight.
Example
CSS ID Selector Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS ID Selector</title>
<style>
#header {
color: blue;
text-align: center;
}
#box {
background: lightgray;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1 id="header">ID Selector Example</h1>
<p>This is a normal paragraph.</p>
<div id="box">This is a styled box using ID.</div>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| ID selector | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
- ID selector starts with a hash (
#) - Each ID should be unique in a page
- An element can have only one ID
- IDs have higher priority than classes in CSS
- Avoid overusing IDs for styling; prefer classes for reusability
Conclusion
The CSS ID Selector is useful for targeting and styling a single unique element on a webpage. While powerful due to its high specificity, it should be used carefully to maintain clean and reusable code.