Can I use XPath to filter elements by CSS properties?

Question

Or do I have to do something like this:

var nodes = document.childNodes;
for (var i in nodes) {
    if (window.getComputedStyle(nodes[i], null).getPropertyValue('someproperty') == 'somevalue')
        // do stuff
}

Edit:

I'm not very familiar with XPath. A 'simple' stab at the problem would be something like this:

function test() {
    var resultSet = document.evaluate("//*[@float='left']", document.body, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
    for (var i = 0; i < resultSet.snapshotLength; i++) {
        var element = resultSet.snapshotItem(i);
        alert(element);
    }
}

But unsurprisingly this doesn't work, since float is a property, not an attribute...

Answer 1

http://blog.stchur.com/2006/06/21/css-computed-style/

Answer 2

As Viet & knut said before, you can go ahead with attribute selectors & string matching functions: http://www.w3schools.com/xpath/xpath_functions.asp#string.

You should not confuse XPath with Javascript :)

I have hint for you. Say you have a node:

<a href="http://google.com" style="padding: 10px; float: left; margin: 10px auto;">Look at me!</a>

Use fn:substring-after("padding: 10px; float: left;", "float:") to get the " left; margin: 10px auto;".

And then use fn:substring-before(" left; margin: 10px auto;", ";") to get the " left".

After this, use fn:normalize-space(" left") to get "left" :)