Need some explanation on HTML, nth-child

Question

NOTE: SEE BELOW FOR CLEARER EXPLANATION

I\'m trying to figure out why this is happening.

jsFiddle 1 - Before

HTML

Answer 1

Isn't .big-chix:nth-child() only suppose to select all the .big-chix classes (which is 6 .big-chix), then set 1, 3, 5 to a background-color of #eee, and 2, 4, 6 to #aaa?

No.

:nth-child() selects "The nth element in the parent", not "The nth element that also matches the other parts of the selector".

Each selector is applied independently and only elements that match all the components will match the complete selector.

Note, however, that there is :nth-of-type() which should do what you want.

Answer 2

use these

.big-chix:nth-child(even) { background-color:#eee; }
.big-chix:nth-child(odd) { background-color:#aaa; }

works in http://jsfiddle.net/TeqUF/2/