CSS Selectors

This table lists all CSS selectors and whether they are supported.

SelectorExampleSupportedNotes

Simple Selectors

[Type][type-link]*inputYES
[Class] [class-link].classnameYES
[ID ][id-link]#idYES
[Universal][universal-link]*YES
[Attribute][attr-link]a[attr~=value]YES

Combinators

[Adjacent sibling][adj-link]img + pCONDITIONAL*EnableComplexCSSSelectorsStyling must be set to true
[General sibling ][gen-link]p ~ spanCONDITIONAL*EnableComplexCSSSelectorsStyling must be set to true
[Child ][chi-link]div > spanCONDITIONAL*EnableComplexCSSSelectorsStyling must be set to true
[Descendant ][desc-link]li liCONDITIONAL*EnableComplexCSSSelectorsStyling must be set to true

Pseudo classes

[active ][active-link]p:activeYES
[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-childYES**
[first - of - type ][first-of-type-link]p:first-of-type
[fullscreen ][fullscreen-link]div:fullscreen
[focus ][focus-link]input:focusYES
[host ][host-link]:host
[host() ][host()-link]:host(.special-custom-element)
[host - context() ][host-context()-link]:host-context(h1)
[hover ][hover-link]p:hoverYES
[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-childYES**
[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-childYES**
[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]:rootYES
[scope ][scope-link]:scope
[target ][target-link]:target
[valid ][valid-link]input:valid
[visited ][visited-link]a:visited

Pseudo elements

[after ][after-link]a::afterYES
[before ][before-link]q::beforeYES
[cue ][cue-link]::cue
[first - letter][first-letter-link]p::first-letter
[first - line ][first-line-link]p::first-line
[selection ][selection-link]::selectionPARTIALonly 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.