CSS Selectors

CSS Selectors are a means to select a set of elements from a DOM and can serve as an alternative to XPath when using flow actions like set-attributes or remove-content.

Supported CSS Selectors

  • Simple selectors:

    • Universal selector: *
    • Type selectors: element
    • Class selectors: .class
    • ID selectors: #id
  • Combinators:

    • Child selectors: e > f
    • Descendant selectors: e f
    • Adjacent sibling selectors (neighbors): e + f
    • Sibling selectors: e ~ f
  • Attribute selectors:

    • Matching attributes: [a]
    • Matching attribute values: [a=v], [a~=v] and [a|=v]
    • Substring matches of attribute values: [a^=v], [a$=v] and [a*=v]

Not supported are any kinds of pseudo-selectors (containing a colon :).

Utilization

Note that the HTML element and attribute names are lowercase after parsing. A CSS selector like H1 would not match any elements in a HTML document, but in a XML document. Any strings excepting CSS class names (e.g. .myClass) are evaluated case-sensitive, so #myID is not the same as #MYID, but .myClass would match all elements contain myclass, MYClass etc. in the class attribute.

Debugging

Internally, CSS selectors are translated to XPath expressions. If your CSS selector does not work or works unexpectedly, enable the debug output in your site. Here you can see the translated versions of all your CSS selectors.