The ID selector matches an element whose id attribute equals the name after #. Example: #demo styles <div id="demo">.
Use it for a unique landmark on the page (header, hero, main). For reusable styles, prefer a class selector — ids are unique and carry high specificity.
Core CSS selector, supported everywhere modern browsers run.
HTML requires unique id values. Overusing #id for styling makes overrides hard because of high specificity. Prefer .class for shared looks.
# id_value { … }The value must be a valid CSS identifier (or escaped). It must match the HTML id exactly, including case.
| Pattern | Description | Try it |
|---|---|---|
#hero | Element with id="hero" | Try it |
div#box | A div that also has that id | Try it |
#nav a | Links inside the element with id="nav" | Try it |
#a, #b | Group two unique ids in one rule | Try it |
#id vs .class | Unique target vs reusable style | Try it |
[id="demo"] | Attribute form — same match, lower specificity | Try it |
#idAdd a unique id in HTML, then select it with # in CSS.
id attribute (letters preferred).#that-id { … } in your stylesheet.| Piece | Required? | Role |
|---|---|---|
HTML id | Yes | Unique name on the element |
# + name | Yes | Selects that exact id value |
| Valid identifier | Yes (or escaped) | Must parse as a CSS id selector |
| Uniqueness | Yes in HTML | One id value per document |
Switch which id rule is active and watch only that unique element update.
Each snippet focuses on the #id selector. Use Try It Yourself for a live editor.
Match the element with id="blue".
#blue {
background-color: skyblue;
}id="blue".#. #blue matches that exact value.Require both a tag name and an id.
div#box {
border: 2px solid #2563eb;
padding: 0.75rem;
}div#box means a div with id="box".#box. The type is optional when the id is unique.#id vs .classOne unique target versus many shared ones.
#banner {
background: #dbeafe;
}
.note {
background: #fef3c7;
}#banner once. Only the unique banner matches..note. Every element with that class shares the style.Most id bugs are duplicates, invalid identifiers, or specificity fights.
Browsers may style the first match only, or behave inconsistently. Keep each id value once per page.
Ids like item?one or 123item need CSS escapes (for example #item\?one). Prefer simple names.
An #id rule beats classes and elements. Overuse leads to !important wars — use classes for shared UI.
#Hero and #hero are different selectors. Match the HTML id exactly.
[id="x"] is not the same specificityIt can select the same element, but the attribute form is weaker than #x. See the attribute selector.
The ID selector is a browser CSS selector. Node.js, Deno, and Bun do not evaluate it.
Supported in all major browsers for decades (Baseline Widely available since about July 2015).
Bottom line: Production-ready. Prefer classes for reusable styles; reserve ids for unique landmarks. Not a server runtime API.
id.#name must match id="name" exactly.One line: #id styles the single element with that unique id.
Select an element only when it immediately follows another sibling.
8 people found this page helpful