Possible Duplicate:
Complex CSS selector for parent of active child
How can I set the style of my <li>
based in a class of a child element?
example:
<div class"options">
<ul>
<li> <a href="#"> option 1 </a> </li>
<li> <a href="#"> option 2 </a> </li>
<li> <a class="last" href="#"> option 3 </a> </li>
<li> <a href="#"> option 4 </a> </li>
<li> <a href="#"> option 5 </a> </li>
<li> <a class="last" href="#"> option 6 </a> </li>
<li> <a href="#"> option 7 </a> </li>
<li> <a href="#"> option 8 </a> </li>
<li> <a class="last" href="#"> option 9 </a> </li>
</ul>
</div>
I can style the a
with .options li a.last { ... }
but what I want is to apply margin:0
to the parent li
, and I have no way to control what's inside <li>
, only what's inside <a>
.
Is there any style trick?
What I'm trying to accomplish:
I have a jQuery loop to add the .last
class to every 3rd <li>
as
$(".box-left li").each(function (i) {
if ((i+1) % 3 == 0)
$(this).addClass("last");
});
But I wanted to learn if there's other way that does not involve a javascript helper.