Only apply styling to last item in nested uls with a certain class

Question

Given the following html:

<ul class="nav">
  <li class="level0">..</li>
  <li class="level0">..</li>
  <li class="level0 active">
    <a href="#">Category Name</a>
    <ul class="level0">
      <li class="level1 active">
        <a href="#">Sub-category</a>
        <ul class="level1">
          <li class="level2 active">
            <a href="#">I only want this link styled</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="level0">..</li>
</ul>

How do I only style that nested link, considering that each parent li also has a class of 'active'? I thought I could use .nav .active:last-child > a which works in the above example, but removing the active class from that li.level2 you would expect then that the li.level1 above it would be styled, but it is not (see jsfiddle below for an example of this).

I may just be having a brainfart but I can't think of a way to target that element with only css. The only thing I can think of is to use javascript to remove the 'active' class from the parent elements, but I feel like there must be some other way.

Here is a more elaborate jsfiddle example that illustrates two test cases: http://jsfiddle.net/K4e37/

Is this possible without changing the markup and without using javascript?

Edit: I wasn't thinking about last-child correctly but here is an updated example which gets pretty close to what I want, just need to not style the higher level elements: http://jsfiddle.net/K4e37/2/

yeah, that looks like it would work to me, but it's not for me — bsoist, Jul 01 '14 at 18:27
last-child is not really working the way I expect - http://jsfiddle.net/LWS8b/ — bsoist, Jul 01 '14 at 18:32
_"you would expect then that the li.level1 above it would be styled"_. No I wouldn't, because `:last-child` selects elements, not classes of elements. — j08691, Jul 01 '14 at 18:33
Isn't that what I'm trying to do, select the last element with a class of active? — Westwick, Jul 01 '14 at 18:38
Looks like no, I played around with your fiddle and got it to do something you definitely don't want it doing: http://jsfiddle.net/K4e37/1/ — RevanProdigalKnight, Jul 01 '14 at 18:51

score 0 · Accepted Answer · edited May 23 '17 at 11:49

0

Based on other answers (here, here), the answer to your question is no. As summarized there, "last-of-type" does not work with classes and "last-child" does not work with the sub-nesting structure in your HTML. I think you'll have to change the markup or use Javascript.

edited May 23 '17 at 11:49

Community

1
1

answered Jul 01 '14 at 19:05

Alex P. Miller

2,128
1
23
20

I think you're probably right. I was able to use this to correctly add a new class to the elements I was targetting: $('li.active:not(:has(li.active)) > a').addClass('deepest'); – Westwick Jul 01 '14 at 19:09

score 0 · Answer 2 · answered Jul 05 '14 at 07:13

List item

If you don't even have the 'level' classes, still you can target your specific html link with the below selector( if you only needs that specific link to be styled ). Please link if your requirement fulfills!

Usiong CSS:

ul.nav li ul li ul li.active a { color: #FF0000; }

Cheers :)

Only apply styling to last item in nested uls with a certain class

2 Answers2