3

i'm struggling with a bit of css so wondered if someone could help.

I've attached an example of my menu system below. What i need is for the last occurrence of li.active be set to display:none - regardless of where I current am within the menu structure. So no absolute css paths please, I need something flexible.

I know this is wrong but gives an idea of what i'm trying to achieve.

#leftnav li.active:last-child ul { display:none; }

So in the below example, only the hello items are hidden.

<div id="leftnav">
  <ul>
    <li>page</li>
    <li>page</li>
    <li>page</li>   
    <li class="active">page
      <ul>
        <li class="active">subpage
          <ul>      
            <li>subsubpage</li>
            <li>subsubpage</li>
            <li>subsubpage</li>
            <li>subsubpage</li>
            <li class="active">subsubpage
                <ul>
                    <li>hello</li>
                    <li>hello</li>
                    <li>hello</li>
                </ul>
            </li>
            <li>subsubpage</li> 
          </ul>
        </li>
        <li>subpage</li>
        <li>subpage</li>
      </ul>
    </li>   
    <li>page</li>
  </ul> 
</div>
4
  • :last-child may have confused you because what it sounds like. It will literally select the last child of a single parent node. In other words, your selector will select a li.active only if it is the last item relative to its siblings (this does not however, look at the depth, which is what you were expecting).
    – MarioDS
    Jun 12, 2014 at 9:43
  • It's not possible to do that with CSS. The only way is to add an extra class to that element and add wanted styles to that class.
    – Vucko
    Jun 12, 2014 at 9:44
  • @MDeSchaepmeester yes that is correct i'm looking for something that can handle depth of nodes, not sure if it's possible with pure css though :(
    – Scott
    Jun 12, 2014 at 9:48
  • Related, if not duplicate: stackoverflow.com/q/5247888/1313143
    – MarioDS
    Jun 12, 2014 at 9:51

2 Answers 2

3

:last-child may have confused you because what it sounds like. It will literally select the last child of a single parent node. In other words, your selector will select a li.active only if it is the last item relative to its siblings (this does not however, look at the depth, which is what you were expecting).

<ul>
  <li class="active">test</li>
  <li>test</li>
  <li class="active">test</li> <!-- select THIS one -->
</ul> 

<ul>
  <li class="active">test</li>
  <li class="active">test</li>
  <li>test</li> <!-- select NONE because the .active ones are not last child -->
</ul>

<ul>
  <li>
    <ul>
      <li class="active">test</li>
      <li>test</li>
      <li class="active">test</li> <!-- select THIS -->
    </ul>
  </li>
  <li class="active">test</li> <!-- And this one too!! -->
</ul>


That said, AFAIK there is no CSS solution to select the deepest nested li.active.

Your options are:

  1. Give an extra class to the deepest child, server-side (or, give an extra class to all the elements that are not the deepest)
  2. Resort to javascript, although it's not exactly recommended if it's for the style and visual behaviour of your website.
3
  • 1
    Yeah I had a look around and even :last-of-type works only on children so doesn't work either. Like you say I doubt there is currently a CSS solution to this. Shame we don't have something like :last which would return the last element in the list queried so far instead of just the children.
    – GillesC
    Jun 12, 2014 at 9:53
  • @gillesc CSS has many shortcomings. It does not provide much in the way of filtering selected elements.
    – MarioDS
    Jun 12, 2014 at 9:55
  • Thanks for the info, i do get how last-child works but wasn't if there was another way to do it - even with css3 selectors. I've opted for the server side solution, I've put some extra logic in my navigation control to output class="active selected" for my active page. cheers guys
    – Scott
    Jun 12, 2014 at 10:25
-2

I can see ther is no Jquery tag in your question but still you can try it with jquery

$('.active').last().css('display','none');

DEMO

2
  • I need this to work with pure css, jquery uses javascript which can be switched off. Plus I don't want to install a full framework just to solve this!
    – Scott
    Jun 12, 2014 at 9:40
  • @Scott sounds seriously but with jQuery.min, you just need to load about 95KB, it's totally acceptable, it can even be cached if you organize your sites system well (so only 1 page in your sites has to load jquery, while others won't have to). Also even pure JS can solve this if you don't want to use jQuery.
    – King King
    Jun 12, 2014 at 10:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.