Правила для определения четных/нечетных с игнорированием определенных блоков

#css #html5

Имеем такую разметку:


    
...
    
...
    
...
    
...
    
...
    
...
    
...
    
...



Необходимо стилизовать классы list по принципу четности/нечетности, но игнорируя
класс ignore, т.е. так:


    
...
    
...
 -- нечетный
    
...
    
...
    
...
 -- четный
    
...
    
...
 -- нечетный
    
...
 -- четный



Простые event/oddдля .list:nth-child не подходят, т.к после .ignore отсчет начинается
сначала.
    

Ответы

Ответ 1

Альтернативный вариант, если не брать за основу классы - использовать :nth-of-type,
который в принципе аналогичен :nth-child, только применяет правило дополнительно привязываясь
к тегу(типу), а не всем дочерним элементам. Собственно чтобы этим воспользоваться,
все игнорируемые элементы должны быть заключены в тег, отличный от основного тега для
подствечиваемых элементов. Например HTML:


    
...
    
...
    
...
    
...
    
...
    
...
    
...
    
...



Стили, где у всех div.list цвет будет чередоваться независимо от их позиции в родителе:

.list {
    background: red;
}

.list:nth-of-type(odd) {
    background: green;
}


Пример на JSBin


Ответ 2

на css наверное только так

Fiddle



.container {
    width: 200px;        
}

.list,
.list ~ .list ~ .list,
.list ~ .list ~ .list ~ .list ~ .list,
.list ~ .list ~ .list ~ .list ~ .list ~ .list ~ .list {
    background: #00f;
}
.list ~ .list,
.list ~ .list ~ .list ~ .list,
.list ~ .list ~ .list ~ .list ~ .list ~ .list,
.list ~ .list ~ .list ~ .list ~ .list ~ .list ~ .list ~ .list{
    background: #f00;
}

    
Ignore
    
Odd
    
Ignore
    
Ignore.
    
Even
    
Ignore
    
Odd
    
Even



Ответ 3

С JS это можно, например, сделать следующим образом






    
    
    



    

        
Ignore
        
Odd
        
Ignore
        
Ignore.
        
Even
        
Ignore
        
Odd
        
Even