Zephr User Guide

Supported CSS Selectors

4 views 0

Zephr supports the following CSS Selectors:

Pattern Matches Example
* any element *
tag elements with the given tag name div
*|E elements of type E in any namespace ns *|name finds <fb:name> elements
ns|E elements of type E in the namespace ns fb|name finds <fb:name> elements
#id elements with attribute ID of “id” div#wrap, #logo
.class elements with a class name of “class” div.left, .result
[attr] elements with an attribute named “attr” (with any value) a[href], [title]
[^attrPrefix] elements with an attribute name starting with “attrPrefix”. Use to find elements with HTML5 datasets [^data-], div[^data-]
[attr=val] elements with an attribute named “attr”, and value equal to “val” img[width=500], a[rel=nofollow]
[attr=”val”] elements with an attribute named “attr”, and value equal to “val” span[hello=”Cleveland”][goodbye=”Columbus”], a[rel=”nofollow”]
[attr^=valPrefix] elements with an attribute named “attr”, and value starting with “valPrefix” a[href^=http:]
[attr$=valSuffix] elements with an attribute named “attr”, and value ending with “valSuffix” img[src$=.png]
[attr*=valContaining] elements with an attribute named “attr”, and value containing “valContaining” a[href*=/search/]
[attr~=regex] elements with an attribute named “attr”, and value matching the regular expression img[src~=(?i)\\.(png|jpe?g)]
The above may be combined in any order div.header[title]