CSS Mapping to XPath

Overview from the CSS Level 2 selectors spec with added XPath equivalents
CSS Pattern XPath equivalent Meaning
* * Matches any element.
E E Matches any E element (ie., an element of type E).
E F E//F Matches any F element that is a descendant of an E element.
E > F E/F Matches any F element that is a child of an element E.
E:first-child *[1]/self::E Matches element E when E is the first child of its parent.
E:lang(c) E[ @xml:lang = "c"
or starts-with( @xml:lang, concat( "c", "-" ) ) ]
Matches element of type E if it is in (human) language c (the document language specifies how language is determined).
E + F E/following-sibling::*[1]/self::F Matches any F element immediately preceded by an element E.
E[foo] E[ @foo ] Matches any E element with the “foo” attribute set (whatever the value).
E[foo="warning"] E[ @foo = "warning" ] Matches any E element whose “foo” attribute value is exactly equal to “warning”.
E[foo~="warning"] E[ contains(
concat( " ", @foo, " " ),
concat( " ", "warning", " " )
) ]
Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning”.
E[lang|="en"] E[ @lang = "en"
or starts-with( @lang, concat( "en", "-" ) ) ]
Matches any E element whose “lang” attribute has a hyphen-separated list of values beginning (from the left) with “en”.
DIV.warning DIV[ contains(
concat( " ", @class, " " ),
concat( " ", "warning", " " )
) ]
HTML only. The same as DIV[class~=”warning”].
E#myid E[ @id = "myid" ] Matches any E element ID equal to “myid”.

Obviously, the E:linkE:visitedE:activeE:hover and E:focus selectors have no equivalent XPath query so I left them out.

The table in the spec doesn’t include examples of the shorthand notation for class or ID selectors that apply to any element (.warning and #myid, respectively), but they’re simply the same as *.warning and *#myid, from which follows how to translate them.

Lastly, any XPath query translated from a CSS selector needs to begin with //.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: