Как скомпоновать :not() и :nth-of-type()?

Question

[Кирилл Ушаков]

Есть примерная верстка

<ul>
	<li></li>
	<li class="hidden"></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li class="hidden"></li>
	<li></li>
	<li class="hidden"></li>
	<li></li>
	<li></li>
</ul>

Как раскрасить список зеброй пропуская пункты с классом hidden используя лишь на css, и возможно ли это?

Такая конструкция не работает, так как nth-of-type и nth-child считают все подряд.
То есть, пункты с hidden не окрасятся, но в расчете на "первый-второй" все равно будут участвовать.

li:not(.hidden).nth-of-type(even) 
    background #ccc

Кому проще на словах, то задача звучит примерно так:
Раскрасить каждый второй пункт, исключая из расчета пункты с классом hidden

Comments

[Сергей Шилов]

так и пишешь:
li:not(.hidden):nth-of-type(even)

все всевдоклассы перечисляются через двоеточие

[Кирилл Ушаков]

Если б все было так просто. Не срабатывает такой вариант.

[Сергей]

li:not(.hidden):nth-of-type(even) {
  background-color: #ccc;
}

Проверил, работает.

[Владислав]

Не работает это :(

Answer 1

[Moskus]

Конструкция

li:nth-of-type(even):not(.hidden) {
  background-color: #ccc;
}

синтакстически верна, но, естественно, не решает и не может принципиально решить задачу, которую хочет решить автор вопроса.

Автор хочет исключить из рассмотрения элементы с классом .hidden при определении четных и нечетных элементов списка, но CSS такую функцию просто не выполняет. Чтобы решить задачу, нужно убирать элементы из DOM-дерева, тогда CSS их не увидит.