0

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:

enter image description here

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.

Community
  • 1
  • 1
balexandre
  • 73,608
  • 45
  • 233
  • 342
  • Do you want to apply `margin:0` to parent `li` of `a` with class last? – Priyank Patel Nov 08 '12 at 11:05
  • @Robbie though it can have the same answer, the question is very different and might help other reach here where they are not searching for "complex css selectors" but a more used "set a style on a parent element" ... for such, and agreeing with [Joel Spolsky](http://stackoverflow.com/users/4) on this kind of questions, it should not be closed. – balexandre Nov 08 '12 at 11:14
  • But surely that's semantics? A bit of googling would sort it out? http://www.google.com/m?q=set+a+style+on+a+parent+element (which is exactly your quote)? – Robbie Nov 08 '12 at 11:22

3 Answers3

1

This can't be done with CSS sadly, best I can offer you is jQuery and it's :has selector.

Alternatively, make all your margins/paddings on the a tag instead of the li tag. This will involve some shuffling but will achieve what you need

Andy
  • 14,427
  • 3
  • 52
  • 76
0

Unfortunately there is currently no way to select a parent element in CSS.

This question has been asked multiple times and this answer seems to sum it up quite well.

Community
  • 1
  • 1
Beardy
  • 750
  • 4
  • 9
0

There is no possibility to select parent element of a child element. May be this will helpful to u Specify the li{line-height:20px;} li a{display:block;}

surendra
  • 56
  • 3