How do I apply odd/even styles to elements while taking into account excluded classes? [duplicate]

Question

How do I apply specific css styling to every (for the sake of argument) odd element in a set of elements, while taking into account a set of excluded elements?

The issue is replicated here (shown in a codepen):

http://codepen.io/houdmont/pen/VLOBBG

A series of elements which have a class .foo applied:

<a href="#" class="foo">1. Blue</a>
<a href="#" class="foo">2. Green</a>
<a href="#" class="foo">3. Blue</a>
<a href="#" class="foo bar">4. Hidden (blue)</a>
<a href="#" class="foo bar">5. Hidden (blue)</a>
<a href="#" class="foo bar">6. Hidden (blue)</a>
<a href="#" class="foo">7. Green</a>

When the .bar class is applied, the element is hidden.

I'd like the remaining elements with .foo applied to be styled odd/even.

Attempt as follows:

.bar {
    display: none;
}

/**
 * This clearly doesn't work as I'd hoped it would.
 */
.foo:not(.bar):nth-of-type(even) {
    color: green;
}

Ideally, I'd like the seventh element to be green, even though it's an "odd" element, if I were able to exclude the elements with class .bar then it would be the fourth element and therefore considered "even", setting the color to green.

Is this possible with CSS?

Answer 1

Unfortunately not possible. Previously answered here: https://stackoverflow.com/a/12205844/1590962

CSS is fully declarative; every selector is a simple condition that is true or false independently of any selector part. It's not a procedural language where you take a set and process it, narrowing it down with each step. A selector language with procedural rules would be immune to many kinds of optimisation and would be slower.

So nth-of-type is only about position within an element's parent, and not position in a 'results list so far' because CSS selectors have no such concept. A selector engine could look up the test for nth-of-type before narrowing it with not, as the rules do not interfere with each other.