CSS Selectors

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

SelectorExampleSupportedNotes

Simple Selectors

Type*inputYES
[Class] class-link.classnameYES
ID#idYES
Universal*YES
Attributea[attr~=value]YES

Combinators

Adjacent siblingimg + pCONDITIONAL*EnableComplexCSSSelectorsStyling must be set to true
General siblingp ~ spanCONDITIONAL*EnableComplexCSSSelectorsStyling must be set to true
Childdiv > spanCONDITIONAL*EnableComplexCSSSelectorsStyling must be set to true
Descendantli liCONDITIONAL*EnableComplexCSSSelectorsStyling must be set to true

Pseudo classes

activep:activeYES
anymatches(header, main)
any - linka:any-link
checkedinput:checked
defaultinput:default
definedsimple-custom:defined
dir():dir(rtl)
disabledinput:disabled
emptyp:empty
enabledinput:enabled
first@page :first
first - childp:first-childYES**
first - of - typep:first-of-type
fullscreendiv:fullscreen
focusinput:focusYES
host:host
host():host(.special-custom-element)
host - context():host-context(h1)
hoverp:hoverYES
indeterminateinput:indeterminate
in - rangeinput:in-range
invalidform:invalid
lang()p:lang(en)
last - childp:last-childYES**
last - of - typeh2:last-of-type
left@page :left
linka: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 - childh2:only-childYES**
only - of - typep:only-of-type
optionalinput:optional
out - of - rangeinput:out-of-range
read - onlyinput:read-only
read - writeinput:read-write
requiredinput:required
right@page :right
root:rootYES
scope:scope
target:target
validinput:valid
visiteda:visited

Pseudo elements

aftera::afterYES
beforeq::beforeYES
cue::cue
first - letterp::first-letter
first - linep::first-line
selection::selectionPARTIALonly 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.