CSS3 :nth-child() Pseudo-Class Quirk
Say we have a grid of tiles, and we want to alternate the colors between three colors (red, green, blue), we could use the :nth-child() pseudo-class selector to accomplish this with 3n+1, 3n+2, and 3n+3.
Now, what happens when we only want to alternate the colors of specific tiles within all the tiles? You might think to simply add another class to your tiles, and apply the :nth-child() to that class.
Odd, that's not what we're looking for, even though we've only applied the :nth-child() selector to .color it seems to be taking into account every tile on the page; it looks like the CSS engine in the browser is taking into account that .color is applied to a li element and counting and applying n-values from to all li elements rather than just li.color elements as is specified.
The intended output is accomplished with a little JavaScript.
Tested on: Chrome 28.0.1500.95, Firefox 23.0, Safari 6.0.4
Update: it looks like the Mozilla Documentation specifies element when using :nth-child(), which would be consistent with what I'm seeing in testing. While it's documented this way, I don't think this is the correct behavior... we are able to use other pseudo-classes with specific elements and classes without applying them to all elements of that type.