CSS selectors are a nice and intuitive alternative to XPath for DOM navigation. While XPath is more complete and has more functionality, CSS selectors were tailored for HTML DOM, where the document content is usually less structured than in XML.
Here are some examples of CSS selector and equivalent XPath expressions:
CSS: document > library > books > book XPath: //document/library/books/book CSS: document book XPath: //document//book CSS: document book#id3 XPath: //document//book[@id='3'] CSS: document book[title='CSS for dummies'] XPath: //document//book[@title='CSS for dummies']
This becomes more interesting when implementing pseudo-selectors in XPath:
CSS: book:first-child XPath: //book[not(preceding-sibling::*)] CSS: book:empty XPath: //book[not(*|@*|node())]
A very nice library that allows for parsing selector expressions according to the w3c specification is this “css-selectors” by Christer Sandberg:
The next version of jOOX will include css-selector’s parser for simpler DOM navigation. The following two expressions will hold the same result:
Match match1 = $(document).find("book:empty"); Match match2 = $(document).xpath("//book[not(*|@*|node())]");