如何使用类名选择css nth-child（3n + 1）选择器

Question

I am trying to use nth-child selector by class name. Fiddle

HTML :

<div>
<span class="head">Heading</span>
<div class="span">1</div>
<div class="span">2</div>
<div class="span">3</div>
<div class="span">4</div>
<div class="span">5</div>
<div class="span">6</div>
<div class="span">7</div>
<div class="span">8</div>
<div class="span">9</div>
</div>

CSS :

.span:nth-child(3n+1){
    color: red;
}

why is not selecting first child form the .span class.?

I need some explanation.

Answer 1

When using a formula (an + b). a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

This may be a little tricky but the indexing of elements here start from 2

b=2 would means the first element is always choosen. So, 4n+2 would mean starting with 1st element and adding 4 in cycle=1,5,9.

The value of n starts at 0.

Similarly b=3 would mean starting from the 2nd element You can not choose 1st element of the ".span" in the series with nth-child=3n+1.

1For your series 1,3,6,9... '1' seems to be out of order. If you need to choose first element along with others in your series:

Add

.span:nth-child(2){
    color: red;
}

Hope it explains the use of nth-child. For more reference http://css-tricks.com/how-nth-child-works/