Syntax Reference
The first table lists the general Selectors
to open a block of declarations (i.e.
enumerated property-value associations in curly braces)
Selectors can be combined with Combinators.
Elements matching selector in the tree may
apply styles based on the resulting specificity.
The Attribute selector may use Attribute selector
operators to target subsets of values, see second table.
Selectors
| Type |
X | Elements tag X |
|---|
| Universal |
* | All elements |
|---|
| Attribute |
[X] | See below |
|---|
| ID |
#X | Equiv. [id=X] |
|---|
| Class |
.X | Equiv. [class~=X] |
|---|
| Pseudo-Class |
:X | c.f. Lookup |
|---|
| Func. Pseudo-Class |
:X() | c.f. Lookup |
|---|
| Pseudo-element |
::X | c.f. Lookup |
|---|
| Nesting |
{&X} | Extends parent sel. |
|---|
Attribute Selectors
| Presence |
[k] | Matches empty value |
|---|
| Exact |
[k = 'v'] | Exact entire value |
|---|
| Hyphen |
[k |= 'v'] | Exact any v, or v-* |
|---|
| Contains Word |
[k ~= 'v'] | Exact any space-sep. |
|---|
| Substring Prefix |
[k ^= 'v'] | Prefix of value |
|---|
| Substring Infix |
[k *= 'v'] | Substring in value |
|---|
| Substring Suffix |
[k $= 'v'] | Suffix of value |
|---|
| Case-Insensitive |
[... i] | For id, class, dataset |
|---|
| Case-Sensitive |
[... s] | For other attrs |
|---|
:target
Direct
A property to keep in mind for this is scroll-padding-to,
which changes how the browser will scroll to the element targeted,
when targeting elements on a map, this is essential to make the target
centered.
Useful property to combine with hidding :not(:target) at the top level.