Understanding Selectors
IDs should be unique - only one element per ID in a document.
Classes can be reused - multiple elements can share the same class.
ID Selector Example
The heading above has id="main-heading" which is styled with #main-heading in CSS.
Class Selector Examples
This paragraph has a highlighted section using the highlight class.
This entire paragraph has the highlight class applied.
Notice how the p.highlight selector in CSS adds italic styling only to paragraphs with the highlight class.
Multiple Classes
This div has both
warning and highlight classes applied.
Selector Specificity
| Selector Type | Example | Specificity Weight |
|---|---|---|
| ID | #main-heading |
100 |
| Class | .highlight |
10 |
| Element | p |
1 |
When multiple selectors apply to the same element, the one with higher specificity wins.
Inline styles (using the style attribute) have even higher specificity than ID selectors.