css3 :not() selector to test parent's class

Question

I have an unordered list, using bootstraps "tabs" plugin. The code looks like this:

<ul>
  <li class="active span3"><a href="#ourAgency" data-toggle="tab"><i class="icon-building icon-3x"></i>Our Agency</a></li>
  <li class="span3"><a href="#studentVisas" data-toggle="tab"><i class="icon-laptop icon-3x"></i>Student Visas</a></li>
  <li class="span3"><a href="#workVisas" data-toggle="tab"><i class="icon-suitcase icon-3x"></i>Work Visas</a></li>
  <li class="span3"><a href="#accreditation" data-toggle="tab"><i class="icon-legal icon-3x"></i>Accreditation</a></li>
</ul>

I'd like to use CSS3 to change the colour of all the <a> links whose parent <li> DOESN'T have the class .active.

I've tried something like this:

 a:not(li.active>a){
    color:grey;
}

but to no avail. Is there any way to do this or am I barking up the wrong tree?

Currently CSS has no "parent" seletor (although CSS4 will evidently have this capability) so you may want to look for another solution — Explosion Pills, Jan 10 '13 at 05:34
Well that's just annoying! I guess I can just apply a special style to `li.active>a` that overrides the regular `a` style, but I'd prefer if I could find the parent. Oh well! — JVG, Jan 10 '13 at 05:35
@Explosion Pills: The code here isn't trying to select the parent; it's trying to select a child based on something the parent matches (or doesn't match). This can't be solved with a parent selector. — BoltClock, Jan 10 '13 at 06:14
i'm not sure about it, but i think that sizzlejs allows you to select parents by an additional pseduo class `:has()` — Peeyush Kushwaha, Jan 10 '13 at 06:23

score 81 · Accepted Answer · edited May 23 '17 at 12:34

Combinators such as >, + and space for descendant aren't allowed within :not() in CSS; they're only allowed as a jQuery selector. You can find out more in this other question.

That said, you may be able to use :not() on the li alone, and move out the > a part; however this will depend on the structure of your ul and li elements:

li:not(.active) > a {
    color: grey;
}

For example, you can always chain other selectors, such as .span3 if you want to limit it to a elements with li parents of that class only:

li.span3:not(.active) > a {
    color: grey;
}

Keep in mind, though, that you can only rely on using :not() in this manner if you have control over the markup or the structure is at least predictable (e.g. you know what kind of elements the parents are). In your case for example, you're only looking at li.span3 > a, and applying styles only when the li.span3 does not have the active class. With this information you can construct a selector like one of the above, which should work as expected.

css3 :not() selector to test parent's class

1 Answers1

Linked