Selecting an LI with an anchor with a specific class

Question

This is really bugging me. Due to the CMS, I have a list with li's like this:

<li class="leaf first active-trail">
    <a href="/trash-this" id="specialIDTest" class="first active" title="">specialTest</a>
</li>

I'm trying to style the menu item, the "li", NOT the "a"... the existing applied css adds padding/coloring etc to the li element, not the a psuedo tag so I need to affect the li for a current state.

So, I need to select: "Whatever is the current li with the class of active-trail but only if it has a child link with the id of 'specialIDTest'.

The reason being that depending what area a user is on, the specific 'specialIDTest' will be color coordinated so I cannot apply a general style declaration to 'active-trail' as that would make all the sections (menu items) the same color when the active area.

So I'm not seeing a 'right to left' selection process here. As I cannot add a class or id to the actual 'li' element, I'm somewhat stuck.

I may be making this harder than need be. I have to support IE7 and above and would rather do this will CSS instead of adding more JQuery, but will do so if necessary.

Possible duplicate http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Jakub Michálek, Sep 13 '13 at 19:05
css does not have parent selector so it can't be done in pure css — Adam Wolski, Sep 13 '13 at 19:05

score 0 · Accepted Answer · answered Sep 13 '13 at 19:09

0

This has actually been asked before, but currently CSS offers no way to read from right to left. You will need to use JQuery/JS to target the li parent of the a tag. http://jsfiddle.net/disinfor/E5fHw/

answered Sep 13 '13 at 19:09

disinfor

8,805
1
28
38

Selecting an LI with an anchor with a specific class

1 Answers1