CSS - 没有某个类的第一个孩子 [英] CSS - First child without certain class

问题描述

是否可以编写CSS规则来选择没有特定类的元素的第一个子元素？

Is it possible to write a CSS rule to select the first child of an element without a specific class?

示例：

<div>
    <span class="common-class ignore"></span>
    <span class="common-class ignore"></span>
    <span class="common-class"></span>
    <span class="common-class"></span>
</div>

在这种情况下，我想选择第一个 span 无类忽略。
我试过这个，但似乎不工作：

In this case I would like to select the first span without class ignore. I tried this, but didn't seem to work:

.common-class:first-child:not(.ignore) {
    ...some rules...
}

UPDATE ：

如果我向名为 parent-class ，Jukka提出的选择器的修改版本除了第一个 span 与类 ignore 一个没有。上述选择器如下：

If I add a class to the parent div named parent-class, a modified version of the selector suggested by Jukka works except when the first span with class ignore comes after the first one without. The above-mentioned selector is the following:

.parent-class > .common-class.ignore + .common-class:not(.ignore) {
    ...some rules...
}

推荐答案

这个问题类似于 CSS选择器，用于类的第一个元素，除了第一个元素没有类。如前所述，：first-child：not（.ignore）代表一个元素，它是父元素的第一个子元素，没有类ignore

This question is similar to CSS selector for first element with class, except for the first element without a class. As mentioned, :first-child:not(.ignore) represents an element that is the first child of its parent and does not have the class "ignore", not the first child matching the rest of the selector.

您可以使用我在到链接的问题，用：不替换类选择器的问题/问题/ 2717480 / css-selector-for-first-element-with-class / 8539107＃8539107 （）包含类选择器的伪类：

You can use the overriding technique with a sibling combinator that I've described in my answer to the linked question, replacing the class selector with the :not() pseudo-class containing a class selector:

.common-class:not(.ignore) {
    /* Every span without class .ignore, including the first */
}

.common-class:not(.ignore) ~ .common-class:not(.ignore) {
    /* Revert above declarations for every such element after the first */
}

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