How can I style the last of a serie of elements in css with a specific class?-CodePudding

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. 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 the menu structure: `

<ul >
<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-page</a>
                               </li>
                           </ul>
                       </li>
                   </ul>
               </li>
           </ul>
       </li>
</ul>

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

<ul >
<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-page</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.

CodePudding user response：

ul *{
    color : #000;
    text-decoration: none
}
ul .active ul li ul li ul li a{
    color : #f00;
    font-weight : bold;
}

<ul >
      <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-page</a>
                               </li>
                           </ul>
                       </li>
                   </ul>
               </li>
           </ul>
       </li>
</ul>

CodePudding user response：

It appeared simpler than I first thought:

Given the current structure, from all nested active elements you need to select the li that only has an a element. To make it work in general (other than a list element) don't use the li element selector at all.

I added two differently nested examples in the snippet along with an ::after text...

.active > a:only-child        { color: red }
.active > a:only-child::after { content: ' (active)' }

<ul >
    <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-page</a>
                            </li>
                            <li >
                                <a href="">sub-sub-page</a>
                            </li>
                            <li>
                                <a href="">sub-sub-page</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<br><br><br>
<ul >
    <li>
        <a href="">Introduction</a>
    </li>
    <li >
        <a href="">level 1</a>
        <ul>
            <li >
                <a href="">subpage</a>
                <ul>
                    <li>
                        <a href="">sub-sub-page</a>
                    </li>
                    <li>
                        <a href="">sub-sub-page</a>
                    </li>
                    <li >
                        <a href="">sub-subpage</a>
                    </li>
                    <li>
                        <a href="">sub-sub-page</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<br><br><br>
<ul >
    <li>
        <a href="">Introduction</a>
    </li>
    <li >
        <a href="">level 1</a>
        <ul>
            <li >
                <a href="">subpage</a>
                <ul >
                    <li>
                        <a href="">Introduction</a>
                    </li>
                    <li >
                        <a href="">level 1</a>
                        <ul>
                            <li >
                                <a href="">subpage</a>
                                <ul>
                                    <li >
                                        <a href="">sub-sub-page</a>
                                    </li>
                                    <li>
                                        <a href="">sub-sub-page</a>
                                    </li>
                                    <li>
                                        <a href="">sub-subpage</a>
                                    </li>
                                    <li>
                                        <a href="">sub-sub-page</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>