March 27, 2012
Changing elements CSS properties based on child element
Question by James Dawson
Possible Duplicate:
Complex CSS selector for parent of active child
This is my markup:
<ol class="wp-paginate">
<li><span class="title"></span></li>
<li><span class="page current">1</span></li>
<li><a href="http://localhost/page/2/" title="2" class="page">2</a></li>
<li><a href="http://localhost/page/2/" class="next">»</a></li>
</ol>
And I want to change the background-position property of the li element that has a span child with the class current. In this case, the second list item.
I do consider myself proficient with CSS, but I really cannot think of how to do that. Maybe there isn’t a way, or I’m just having a brain fart.
Thanks!
Answer by Starx
Its nearly impossible with javascript.
Using jQuery
$("li").each(function() {
if($(this).find("span.current").length > 0) {
$(this).css("backgroundPostion", "top left");
}
});
