css selectors - CSS - First child without certain class

Question

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

example:

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

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:

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

Answer 1

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.

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 */
}