Как применять нечетные/четные стили к элементам при учете исключенных классов?

Как применить конкретный стиль CSS для каждого (ради аргумента) нечетного элемента в наборе элементов, принимая во внимание набор исключенных элементов?

Проблема реплицируется здесь (показана в кодефене):

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

Применяется ряд элементов, которые имеют класс .foo:

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

Когда применяется класс .bar, элемент скрыт.

Я бы хотел, чтобы оставшиеся элементы с .foo применялись для стилизации нечетно/четно.

Попытайтесь сделать следующее:

.bar {
    display: none;
}

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

В идеале, я бы хотел, чтобы седьмой элемент был зеленым, хотя это был "нечетный" элемент, если бы я мог исключить элементы с классом .bar, тогда он был бы четвертым элементом и поэтому считался бы "четным" ", установив цвет в зеленый цвет.

Возможно ли это с помощью CSS?

Ответ 1

К сожалению, это невозможно. Ранее здесь ответил: fooobar.com/questions/384452/...

CSS полностью декларативный; каждый селектор - это простое условие, которое является истинным или ложным независимо от любой части селектора. Это не процедурный язык, на котором вы берете набор и обрабатываете его, сужая его с каждым шагом. Селекторный язык с процедурными правилами будет невосприимчив ко многим видам оптимизации и будет медленнее.

Итак, nth-of-type - это только позиция в родительском элементе, а не позиция в списке результатов до сих пор, потому что селектора CSS не имеют такой концепции. Механизм выбора мог бы проверить тест для nth-of-type, прежде чем сузить его, а не, поскольку правила не мешают друг другу.

Ответ 2

Как сказал Гефисток, нет никакого способа сделать это с помощью только css. С другой стороны, с javascript это очень просто:

var list = document.getElementsByClassName('foo');
var x=0;
for(i=0;i<list.length; i++){
    if(x%2==1) list[i].style.color='green';
    if(list[i].className.indexOf("bar")==-1) x++;
}