CSS - First child without certain class

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

Solution 2:

This selects all span with a .common-class and without an .ignore class.

span.common-class:not(.ignore) {
  color: blue;
}

But, because we want to select only the first one, you can override the siblings that follow with the ~ selector.

span.common-class:not(.ignore) ~ span {
  color: black;   /* or   color: inherit; */
}

jsBin demo

If you are already using jQuery, this can also be done with

$("span.common-class:not(.ignore):first").css('color', 'blue');