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