This table lists all CSS selectors and whether they are supported.
Selector | Example | Supported | Notes |
---|---|---|---|
Simple Selectors | |||
Type | *input | YES | |
Class | .classname | YES | |
ID | #id | YES | |
Universal | * | YES | |
Attribute | a[attr~=value] | YES | |
Combinators | |||
Adjacent sibling | img + p | CONDITIONAL* | EnableComplexCSSSelectorsStyling must be set to true |
General sibling | p ~ span | CONDITIONAL* | EnableComplexCSSSelectorsStyling must be set to true |
Child | div > span | CONDITIONAL* | EnableComplexCSSSelectorsStyling must be set to true |
Descendant | li li | CONDITIONAL* | EnableComplexCSSSelectorsStyling must be set to true |
Pseudo classes | |||
active | p:active | YES | |
any | matches(header, main) | ||
any - link | a:any-link | ||
checked | input:checked | ||
default | input:default | ||
defined | simple-custom:defined | ||
dir() | :dir(rtl) | ||
disabled | input:disabled | ||
empty | p:empty | ||
enabled | input:enabled | ||
first | @page :first | ||
first - child | p:first-child | YES** | |
first - of - type | p:first-of-type | ||
fullscreen | div:fullscreen | ||
focus | input:focus | YES | |
host | :host | ||
host() | :host(.special-custom-element) | ||
host - context() | :host-context(h1) | ||
hover | p:hover | YES | |
indeterminate | input:indeterminate | ||
in - range | input:in-range | ||
invalid | form:invalid | ||
lang() | p:lang(en) | ||
last - child | p:last-child | YES** | |
last - of - type | h2:last-of-type | ||
left | @page :left | ||
link | a:link | ||
not() | :not(p,h1) | ||
nth - child() | :nth-child(4n) | PARTIAL** | No support for the [ of <complex-selector-list> ] syntax. |
nth - last - child() | :nth-last-child(4n) | ||
nth - last - of - type() | p:nth-last-of-type(4n) | ||
nth - of - type() | p:nth-of-type(4n) | ||
only - child | h2:only-child | YES** | |
only - of - type | p:only-of-type | ||
optional | input:optional | ||
out - of - range | input:out-of-range | ||
read - only | input:read-only | ||
read - write | input:read-write | ||
required | input:required | ||
right | @page :right | ||
root | :root | YES | |
scope | :scope | ||
target | :target | ||
valid | input:valid | ||
visited | a:visited | ||
Pseudo elements | |||
after | a::after | YES | |
before | q::before | YES | |
cue | ::cue | ||
first - letter | p::first-letter | ||
first - line | p::first-line | ||
selection | ::selection | PARTIAL | only color and background-color properties |
slotted | ::slotted(span) |
** Structural pseudo-class selectors cause additional style rematching of direct children in the DOM tree which affects performance. They should be used only when necessary.