nth-of-type не работает, если элемент html не изменен

Question

Я с ума сошел от этой проблемы. Я пытаюсь настроить таргетинг на каждый другой экземпляр div с определенным классом с помощью nth-of-type. Я получил nth-of-type для работы, когда элементы HTMl изменены, но не тогда, когда это просто div. Должно быть, я не понимаю что-то правильно, поэтому я ценю вашу помощь в этом!

Вот пример, близкий к тому, что мне нужно (за исключением тегов внутренних секций должны быть дивы):

.employee-group { 
    border: 1px solid green; 
} 

.employee-group:nth-of-type(odd) { 
     background-color: blue; 
} 

<div class="employee-group"> 
    <p class="employee">Odd</p> 
    <p class="employee">Div</p> 
</div> 
<section> 
    <p>Section</p> 
</section> 
<div class="employee-group"> 
    <p class="employee">Even .employee-group</p> 
    <p class="employee">Works as expected, no background color</p> 
</div> 
<section> 
    <p>Section</p> 
</section> 
<div class="employee-group"> 
    <p class="employee">Odd</p> 
    <p class="employee">Div</p> 
</div> 
<section> 
    <p>Section</p> 
</section> 

http://codepen.io/usern4me/pen/BLZjJj

А вот сценарий, что мне нужно сделать работу, но для жизни меня я не могу это сделать:

.employee-group { 
    border: 1px solid green; 
} 

.employee-group:nth-of-type(odd) { 
     background-color: blue; 
} 

<div class="employee-group"> 
    <p class="employee">Odd</p> 
    <p class="employee">Div</p> 
</div> 
<div> 
    <p>Even</p> 
    <p>Div</p> 
</div> 
<div class="employee-group"> 
    <p class="employee">Odd div</p> 
    <p class="employee">But even .employee-group (shouldn't have bg color!!!)</p> 
</div> 
<div> 
    <p>Even</p> 
    <p>Div</p> 
</div> 
<div class="employee-group"> 
    <p class="employee">Odd</p> 
    <p class="employee">Div</p> 
</div> 
<div> 
    <p>Even</p> 
    <p>Div</p> 
</div> 

http://codepen.io/usern4me/pen/YGbwEb

Кажется, что селектор n-го типа соответствует классу и что он является нечетным div в общем количестве div. Я бы ожидал, что он просто посмотрит на класс для счета.

Благодарим за помощь!

Answer 1

Для равномерного .employee-группы выпуска изменить .employee-group:nth-of-type(odd) к

.employee-group:nth-of-type(4n+1) 

Explaination в: Ваше требование хотел пропустить любой другой элемент в нечетной последовательности т.е. вместо (1,3,5,7,9 , 11 ....) свойства должны ударить (1,5,9,13 ....) и т. Д. Для этого мы дали параметру формулу для вычисления того, что так, что делает css, принимает индекс (0, 1,2,3) в качестве n для каждого элемента .employee-group и вычисляет, где применять свойства на основе результата формулы, который идет как

(4n + 1) = номер цели

(4x0 + 1) = 1

(4x1 + 1) = 5

(4x2 + 1) = 9

(4x3 + 1) = 13

... и так далее.

Это должно решить вашу проблему, я верю.

Надеюсь, это поможет.