How to style the last element with a certain class in a nested list with css

Question

I need to style the last HTML element with a certain css class, but I must consider certain constraints.

In the website I'm working on the navigation menu is made by several nested lists, when one element is clicked on the li element with the page name acquires the .active class, if it belongs to a nested list all parent li elements above also acquire the .active class.

I'd like to be able to style the last li element with class .active since it corresponds to the currently open webpage.

The disposition of the element of the lists can take any disposition so I need something that works with different indentations or number of elements.

I'm working with Omeka s content management system, which means that I can't use javascript or modify the HTML files, so I'm looking for a solution in pure CSS.

here is an example of the menu structure:

<ul class="">
<li >
     <a href="">Introduction</a>
</li>
     <li>
          <a href="">level 1</a>
           <ul>
               <li>
                   <a href="">subpage</a>
                   <ul>
                       <li>
                           <a href="">sub-subpage</a>
                           <ul>
                               <li>
                                   <a href="">sub-sub-subpage-a</a>
                               </li>
                               <li>
                                   <a href="">sub-sub-subpage-b</a>
                               </li>
                           </ul>
                       </li>
                   </ul>
               </li>
           </ul>
       </li>
</ul>

here is when I'm on th page "sub-sub-page-b":

<ul class="">
<li >
     <a href="">Introduction</a>
</li>
     <li class="active">
          <a href="">level 1</a>
           <ul>
               <li class="active">
                   <a href="">subpage</a>
                   <ul>
                       <li class="active">
                           <a href="">sub-subpage</a>
                           <ul>
                               <li>
                                   <a href="">sub-sub-subpage-a</a>
                               </li>
                               <li class="active">
                                   <a href="">sub-sub-subpage-b</a>
                               </li>
                           </ul>
                       </li>
                   </ul>
               </li>
           </ul>
       </li>
</ul>

I've tried to use li.active:last-of-type but it only select the last element of type li

I also tried to use:

 
.active > a:only-child{
 color: red 
}

but it only works if the element I want to select is an only child.

Note that :last-of-type only applies to elements with the same direct parent (siblings), so even if it worked with classnames it wouldn't solve your issue. — Geat, Jan 10 '23 at 17:31

score 1 · Answer 1 · answered Jan 10 '23 at 20:36

You can get a certain way by using the CSS :has but note this is behind a flag on Firefox at the moment.

li.active:not(:has(ul li.active))>a {
  color: red;
}

<ul class="">
  <li>
    <a href="">Introduction</a>
  </li>
  <li class="active">
    <a href="">level 1</a>
    <ul>
      <li class="active">
        <a href="">subpage</a>
        <ul>
          <li class="active">
            <a href="">sub-subpage</a>
            <ul>
              <li>
                <a href="">sub-sub-subpage-a</a>
              </li>
              <li class="active">
                <a href="">sub-sub-subpage-b</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

How to style the last element with a certain class in a nested list with css

1 Answers1