zebra css игнорирует один элемент?

Question

Я в HTML-код, я не контролирую:

<div id="container"> 
    <input type="hidden"/ > 
    <div>...</div> 
    <input type="hidden"/ > 
    <div>...</div> 
    <input type="hidden"/ > 
    <div>...</div> 
</div> 

Я хочу, чтобы применить зебру CSS только див, конечно nth-child(odd) не будет работать, как и все дивы нечетные.

Что может быть правильным способом применить зебру, используя только css нет javascript?

Answer 1

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

#container div:nth-of-type(odd){ 
    background-color: #fafafa; 
} 

Answer 2

.one:nth-child(4n) { 
 
    color: red; 
 
} 
 
.one:nth-child(4n + 2) { 
 
    color: magenta; 
 
}

<div> 
 
    <input type="text"> 
 
    <div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia eaque impedit debitis repellat neque, voluptates labore sequi odit aut nesciunt ducimus magni accusamus, ab, eveniet hic unde quam voluptas quae.</div> 
 
    <input type="text"> 
 
    <div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia eaque impedit debitis repellat neque, voluptates labore sequi odit aut nesciunt ducimus magni accusamus, ab, eveniet hic unde quam voluptas quae.</div> 
 
    <input type="text"> 
 
    <div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia eaque impedit debitis repellat neque, voluptates labore sequi odit aut nesciunt ducimus magni accusamus, ab, eveniet hic unde quam voluptas quae.</div> 
 
    <input type="text"> 
 
    <div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia eaque impedit debitis repellat neque, voluptates labore sequi odit aut nesciunt ducimus magni accusamus, ab, eveniet hic unde quam voluptas quae.</div> 
 

 
</div>

http://jsbin.com/domucacodi/edit?html,css,output

Answer 3

По Зебра CSS, вы имеете в виду альтернативный образец цвета для дивы правой.

Пользователь п-й ребенок дом с 4n + 2 значение

div:nth-child(4n+2){ 
    background: #000; 
}