I would like to select all "div" elements that are children of the "body" and have z-index: 2 property set.
document.querySelectorAll('body > div');
How do I involve the z-index check on this querySelector?
+2
A:
I believe that you can't involve the "z-index" into the selector, because there's no CSS selector syntax for selecting elements based on CSS style attributes.
What you could do would be to achieve your "z-index: 2" styling by giving elements a particular class. You could then use the class in your selector ("body > div.zIndex2" or whatever).
Pointy
2010-10-01 13:03:42
Thanks for the answer, i just didn't want to add new code since I already distinguish which "divs" I would like by having z-index:2 (which also serves on some animation in my code).
Dennis K.
2010-10-01 13:21:42
If the z-index is directly on the "style" attribute, then you *might* be able to make up a selector to examine the "style" attribute itself - that might be messy and it seems pretty fragile to me.
Pointy
2010-10-01 13:51:46
is this something like 'body > div[style= ... etc?
Dennis K.
2010-10-01 13:54:55
Yes - however that's probably pretty close to the edge of what the browsers are going to be able to do. I don't know whether there's good support for jQuery-style limited pattern matching, or if that's even part of the CSS3 spec. Maybe it is though. Good luck!
Pointy
2010-10-01 14:07:41
A:
I would probably use jQuery for a selection like that and a custom selector like:
$.expr[':'].zIndex = function(obj) {
if ($(obj).css('z-index')==2) return true;
else return false;
}
Then call with:
$('body div:zIndex')
but you would need jQuery for this and I haven't tested it
BenWells
2010-10-01 13:15:31