仅选择具有特定类的最嵌套列表项

时间:2013-07-01 20:03:19

标签: css html-lists

我只需要选择li.active结构中最深的ul。在这种情况下,Další kategorie。我找不到css唯一的解决方案。它甚至可能吗?感谢。

<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>

4 个答案:

答案 0 :(得分:0)

当它是静态结构时,那么这个选择器应该完成这项工作:

.smenu > ul > li > ul > li.active {
    /* your rules */
}

答案 1 :(得分:0)

简单地

nav.smenu ul li ul li.active

答案 2 :(得分:0)

<强>更新 目前这不仅仅是通过CSS。孩子不能影响他们的父母。一旦CSS4 :has()选择器从工作草案到规范并且浏览器开始实现它,就有可能。当前状态:https://drafts.csswg.org/selectors-4/#relational


原始回答: 好吧,如果只能通过CSS实现,我就是这样做的:

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

答案 3 :(得分:0)

我不确定在进行操作时是否可以使用该功能,但这和没有:has运算符的情况下可接受的答案一样有效。

$('.smenu').find('li.active').last().addClass('deepest')

假设一次只有一个嵌套路径处于活动状态。