ID Selectors
ID selectors target a unique element with a specific id attribute. They start with a hash (#).
Basic ID Selectors
Loading Selector Playground...
Try these ID selectors:
#main-header- element with id "main-header"#navigation- element with id "navigation"#content- element with id "content"
ID vs Class
- IDs must be unique - only one element per page
- Classes can be reused on multiple elements
Loading Selector Playground...
Styling with ID Selectors
Loading CSS Playground...
ID Specificity
ID selectors have higher specificity than classes:
Loading CSS Playground...
The text is red because #special has higher specificity than .highlight.
Exercise: Style by ID
Target the element with id "header" and change its background:
Loading CSS Exercise...