THE (NEAR) FUTURE - CSS: Professional Techniques for Modern Layout - page 240

A quick explanation of the 4n+1 part.
4n means every element that can be described by the formula 4 times n , where n
describes the series 0, 1, 2, 3, 4… .h at yields elements number 0, 4, 8, 12, 16, and so on.
(Similarly, 3n would yield the series 0, 3, 6, 9, 12… .)
But there is no zeroth element; elements start with the i rst (that is, element number 1).
So you have to add + 1 in order to select the i rst, i t h, ninth, and so forth elements.
Yes, you read that right: the :nth-child() pattern starts counting from 0, but the elements
start counting from 1. h at's why + 1 will be a feature of most :nth-child() selectors.
h e great thing with this kind of selector is that if you want to change from selecting every
fourth element to every third element (see Figure 7-9), you need only change a single number.
.quotebox:nth-child(3n+ 1) { clear : left ;}
242
Figure 7-9: Clearing every third child.
h at might seem pretty nit y on its own, but it gets better. If you combine this approach with
media queries, you get an adaptable grid-like layout (see Figure 7-10).
@media all and (min-width: 75.51em) {
.quotebox:nth-child(5n+ 1) { clear : left ;}
}