CSS Selectors
This table lists all CSS selectors and whether they are supported.
| Selector | Example | Supported | Notes |
|---|---|---|---|
Simple Selectors | |||
| Type | *input | YES | |
| [Class] class-link | .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) |
* To use these selectors, you must set EnableComplexCSSSelectorsStyling to true, either through the C++ parameter value, or via the –enable-complex-css 1 command line argument when using the Player. You can switch them on or off. Disabling them increases performance.*
** 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.