-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
63 lines (43 loc) · 1.15 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
---
title: ID selectors
slug: Web/CSS/ID_selectors
page-type: css-selector
browser-compat: css.selectors.id
---
{{CSSRef}}
The CSS **ID selector** matches an element based on the value of the element's [`id`](/en-US/docs/Web/HTML/Global_attributes/id) attribute. In order for the element to be selected, its `id` attribute must match exactly the value given in the selector.
```css
/* The element with id="demo" */
#demo {
border: red 2px solid;
}
```
## Syntax
```css
#id_value { style properties }
```
Note that syntactically (but not specificity-wise), this is equivalent to the following {{Cssxref("Attribute_selectors", "attribute selector")}}:
```css
[id=id_value] { style properties }
```
## Examples
### CSS
```css
#identified {
background-color: skyblue;
}
```
### HTML
```html
<div id="identified">This div has a special ID on it!</div>
<div>This is just a regular div.</div>
```
### Result
{{EmbedLiveSample("Examples", '100%', 50)}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- [CSS Selectors](/en-US/docs/Web/CSS/CSS_selectors)
- [Learn CSS: Selectors](/en-US/docs/Learn/CSS/Building_blocks/Selectors)