Select the last active li class in a CSS nav menu

Question

I need to color ONLY the last li with the class default using only CSS. Editing the HTML is not an option. IE9+ is fine. How do I color only the last link? This is just an example and the menu is dynamic so using last child or specifying the exact last link is not an option. I have a nav menu like this:

<ul>
    <li class="default">
        <a href="#">About Us</a>
        <ul>
            <li class="default">
                <a href="#">Where we live</a>
                <ul>
                    <li class="default">
                        <a href="#">Make this link red only</a>
                    </li>
                    <li>
                        <a href="#">Directions</a>
                    </li>
                </ul>
            </li>
        </ul>
     </li>
 </ul>

I would prefer not to but I am getting the feeling that I might have to :( It would still be easier for me to add jquery than to change the html sadly. — ifthiselsethat, Nov 27 '12 at 23:22
The jquery solution would be: $("li.default:last a").css("color", "red"); — Tim Booker, Nov 27 '12 at 23:36
I don't mean to question your setup, but why can't you change the HTML? — Baumr, Nov 27 '12 at 23:37
I can't change the HTML because it is being auto generated by a CMS that unfortunately I cannot change at this time. Believe me, I would like to! — ifthiselsethat, Nov 28 '12 at 13:44
Not to sound like a broken record, but does your CMS run on PHP by any chance? :P — Baumr, Nov 28 '12 at 17:55

Michael K. · Accepted Answer · 2014-02-27T14:48:07.370

4

As for a pure CSS approach, IE9 supports these pseudo selectors. This could also work in something like jquery as well. However, the problem with this code is if you have more than one default, then it would colour those.

li.default > a:only-child {
  color:red;            
}

edited Feb 27 '14 at 14:48

answered Nov 27 '12 at 23:21

Michael K.

555
2
15

I have been working with this and got `li.default>a:only-child { color:red; }` which works when the active element is on the last level but on the second and first levels this does not work – ifthiselsethat Nov 27 '12 at 23:32
@faithfulprogrammer then maybe `li.default > a { color:red; }` in addition to the above selector? – Michael K. Nov 27 '12 at 23:40
Works if there is definitely only one default on the last level. – Tim Booker Nov 27 '12 at 23:41
+1 for getting the closest using pure CSS. I will mark this as the accepted answer because I am gathering that what I truly am looking for cannot be acheived with just CSS. I will be using apathetic's jquery to solve this problem. Thanks for your help guys! – ifthiselsethat Nov 28 '12 at 13:58
I would normally say go for the CSS if it works, but when it comes to using jQuery for simple highlighting like this, I'd recommend a server side (e.g. PHP) solution instead as it's much lighter and won't slow anything down (most webhosts support PHP nowadays) – Baumr Nov 28 '12 at 17:52

score -1 · Answer 2 · edited May 23 '17 at 12:27

I think that this PHP solution would be best in your case (here's a PHPfiddle demo I made: hit 'Run' and wait a few seconds).

To implement this, add this to the top of your HTML file:

<?php $thisPage='Make this link red only'; ?>
<html><head>

And then add in this PHP (inside the <?php and ?> tags) to all of your navigation items:

     <ul>
        <li <?php if ($thisPage=='About Us') echo ' id="currentpage"'; ?>>
            <a href="#">About Us</a>
            <ul>
                <li<?php if ($thisPage=='Where we live') 
          echo ' id="currentpage"'; ?>>
                    <a href="#">Where we live</a>
                    <ul>
                        <li<?php if ($thisPage=='Make this link red only') 
          echo ' id="currentpage"'; ?>>
                            <a href="#">Make this link red only</a>
                        </li>
                        <li <?php if ($thisPage=='Directions') 
          echo ' id="currentpage"'; ?>>
                            <a href="#">Directions</a>
                        </li>
                    </ul>
                </li>
            </ul>
         </li>
     </ul>

And then set your CSS to:

#currentpage a { color: red; }

You'll also have to rename your index.html as index.php, or the better solution would be to use .htaccess (assuming you're running an Apache server) to parse PHP inside HTML files.

Currently my setup does not use PHP at all, so I cannot use this solution — ifthiselsethat, Nov 28 '12 at 13:51

Select the last active li class in a CSS nav menu

2 Answers2