Direct (simple) selectors test a single element: its tag name, class, ID, or role as the document root. Write them together with no spaces to form a compound selector that requires every part: button.primary#save matches only a <button> with that class and ID.
| Selector | Matches | Specificity |
|---|---|---|
| * | Every element | 0-0-0 |
| p / .note | Every <p> / class note | 0-0-1 / 0-1-0 |
| p.note | <p> with class note | 0-1-1 |
| #main | The element with id="main" | 1-0-0 |
| :root | The root element, <html> | 0-1-0 |
| h1, h2 | Both (a selector list) | Per item |
Prefer classes for styling: an ID's 1-0-0 beats any number of classes, which makes later overrides painful. :root is the conventional home for custom properties (Custom Properties).