仅选择具有特定类别的最嵌套列表项 [英] Select only the most nested list item with specific class

问题描述

我只需要选择ul结构中最深的li.active.在这种情况下，该值为Další kategorie.我找不到CSS唯一的解决方案.可能吗?谢谢.

I need to select only the the deepest li.active in the ul structure. In this case that would be Další kategorie. I cannot find css only solution. Is it even possible? Thanks.

<nav class="smenu">
    <ul>
        <li class="predsednictvo first"><a href="/cs/csmg/predsednictvo/"><span>PŘEDSEDNICTVO</span></a></li>
        <li class="sub active komise"><a href="/cs/csmg/komise/"><span>KOMISE</span></a>
            <ul>
                <li class="kategorie first"><a href="/cs/csmg/komise/kategorie/"><span>Kategorie</span></a></li>
                <li class="active dalsi-kategorie last"><a href="/cs/csmg/komise/dalsi-kategorie/"><span>Další kategorie</span></a></li> // I'need to select only this element (current page)
            </ul>
        </li>
        <li class="kontakty"><a href="/cs/csmg/kontakty/"><span>KONTAKTY</span></a></li>
        <li class="reprezentace last"><a href="/cs/csmg/reprezentace/"><span>REPREZENTACE</span></a></li>
    </ul>
</nav>

推荐答案

更新: 目前，这仅通过CSS是不可能的.孩子不能影响他们的父母.一旦CSS4 :has()选择器从工作草案变成规范，并且浏览器开始实施它，这将是可能的.当前状态: https://drafts.c​​sswg.org/selectors-4/#relational

Update: This is currently not possible only via CSS. Children cannot affect thei parents. It will be possible once CSS4 :has() selector gets from working draft to specification and browsers starts implementing it. Current state: https://drafts.csswg.org/selectors-4/#relational

原始答案: 好的，如果不可能仅通过CSS，那就是我要这样做的方式:

Original answer: Ok, if it's not possible only via CSS, that's how I would do it:

$('li.active:not(:has(li.active))').addClass('deepest');

这篇关于仅选择具有特定类别的最嵌套列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！