Selectors, specificity, and pseudo-classes
| Command | Description |
|---|---|
element | Type selector Example: div, p, h1 |
.class | Class selector Example: .container |
#id | ID selector Example: #header |
* | Universal selector (all elements) |
| Command | Description |
|---|---|
A B | Descendant (any level deep) |
A > B | Direct child only |
A + B | Adjacent sibling |
A ~ B | General sibling |
| Command | Description |
|---|---|
:hover | Mouse over |
:focus | Has focus |
:active | Being clicked |
:first-child | First child element |
:last-child | Last child element |
:nth-child(n) | nth child (1, 2n, odd, even) |
:not(selector) | Negation |
| Command | Description |
|---|---|
::before | Insert before content |
::after | Insert after content |
::first-letter | First letter |
::first-line | First line |
::placeholder | Input placeholder text |
| Command | Description |
|---|---|
element | 0-0-1 |
.class | 0-1-0 |
#id | 1-0-0 |
inline style | 1-0-0-0 |
!important | Overrides all (avoid) |