I’m : a programmer, writer, podcaster, geek, and coffee enthusiast.

Xpath as a CSS selector language

Montoya quotes Moonfall: “At first I tried to write a language that generated CSS. I quickly came to realize that CSS is very good at describing itself and no programming syntax comes close. Try inventing a language syntax thats better at describing this: #container div #nav span a:hover { color:red }”

I always thought CSS selectors should be expressable as Xpaths. They’d be a lot more powerful, and they could still support the #id and .class shorthand.


container/div//#nav/span/a:hover { color: red; }

That’s cool, but longer and more verbose than CSS’ selectors. But what if you wanted to do something more complex, like alternating row colors? No more hacky “odd” and “even” classes:

table#posts//tr[position() mod 2 = 0]/td { background-color: gray; } table#posts//tr[position() mod 2 = 1]/td { background-color: white; }

How about highlighting links that point to a particular site?

a[contains(@href, ‘’)] { color: #55f; }

You could even do node-inheritance operations backwards, like applying a different padding to a paragraph that contains images:

p[img] { padding: 5px; }

Or giving borders to images greater than a certain size (assuming you use correct width and height attributes):

img[@width > 100 and @height > 75] { border-width: 3px; }

Cool stuff. I can dream…