CSS获取没有课程的最后一个孩子 [英] CSS Get last-child that doesn't have a class

问题描述

对于您来说，这是一个棘手的挑战，CSS选择器获取没有类的:last-child.

Here is a tricky challenge for you guys, CSS selector to get the :last-child that doesn't have a class.

到目前为止我尝试过的事情:

What I have tried so far:

.nav-item:not(.nav-item--mobile):last-child {...}
.nav-item:last-child:not(.nav-item--mobile) {...}

我有类似的查询选择器，它们可以做一些有趣的事情，所以我宁愿尝试通过CSS来做到这一点.流动物品的数量可以变化.

I have similar query selectors that do some fun stuff, so I'd rather try and do this via CSS. The mobile items can be variable in quantity.

// Get the first child in the list when there are n or more, and
// they are not mobile. Yes, this actually works.
.nav-item:first-child:nth-last-child(n+7):not(.nav-item--mobile)

在所有情况下，以下内容将给我最后一个孩子，但我希望最后一个不是仅移动孩子的孩子.

The following will give me the last child in all cases, but I want the last child that isn't a mobile only child.

.navigation-item--top:last-child

目标

generic generic generic generic generic mobile mobile
                                   ^
                             target this one

HTML

<ul class="nav-items-list">
    <li class="nav-item"></li>
    <li class="nav-item"></li>
    <li class="nav-item"></li>
    <li class="nav-item"></li>
    <li class="nav-item nav-item--mobile"></li>
    <li class="nav-item nav-item--mobile"></li>
</ul>

是的，我可以找出生成的导航中哪个是正确的，或者可以使用JS找到它.

推荐答案

不幸的是，仅使用CSS无法实现您想要的东西.

Unfortunately what you want cannot be achieved using CSS only.

:last-child只会问一个问题，无论您指定了什么:我是父元素的最后一个孩子吗?

:last-child asks only one question, no matter what else you specify: Am I the last child of my parent element?

可悲的是，没有:last-of-class，只有:last-of-type，但这只在乎元素类型.

Sadly, there is no :last-of-class, only :last-of-type, but this cares only about element type.

甚至没有计划为4级选择器指定一个类或其他限制属性. 参见

It is not even planned for selectors level 4 that you can specifiy a class or other limiting property. See

https://www.w3.org/TR/selectors4/#the-last-child-pseudo

这篇关于CSS获取没有课程的最后一个孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！