Styling the final HTML element with a specific css class presents challenges due to certain constraints that must be considered.
In the website I'm currently working on, the navigation menu consists of multiple nested lists. When an element is clicked, the li element with the corresponding page name receives the .active class. If it belongs to a nested list, all parent li elements above it also inherit the .active class.
I am seeking a way to style the last li element with the class .active, as it represents the currently open webpage. The arrangement of list elements can vary widely, so a solution that accommodates different indentations and numbers of elements is necessary.
Given that I am using the Omeka S content management system, which prohibits JavaScript usage or direct modification of HTML files, my solution needs to be based solely on 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>
For instance, when viewing the 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>
An attempt was made using li.active:last-of-type, but it only targets the last li element regardless of its class.
Another approach involved:
.active > a:only-child{
color: red
}
This method proved effective only when the targeted element was an only child.