CSS Pseudo class selector nth

Web page Production WEBJX article introduction: : Nth-child () working principle.

This is a CSS selector, a real pseudo class selector, which is nth-child (), and here's an example of using it.
UL Li:nth-child (3n+3) {
Color: #ccc;
}

The above CSS is what to use, it is in the unordered list of the selection is 3 times times the number of columns. That's 3rd, 6th, 9th, and so on. But how does it work? How do you use Nth-child if you encounter other situations?

Overall nth-child () parentheses support two keywords: even and odd. They should be obvious, even select even tags, such as 2nd, 4th, 6th, and so on. Odd select odd tags, such as 1th, 3rd, 5th, and so on.

As you can see in the first example, the parentheses in Nth-child () also support the equation, is the simplest equation? It's just numbers. If you enter a number in parentheses, it simply selects the corresponding tag for that number. For example, how to select only the 5th LABEL element.
UL Li:nth-child (5) {
Color: #ccc;
}

Let's go back to the "3n+3" in the first example, what is his working principle? Why does he just choose 3 times times the number of tag elements? Here it is necessary to understand the calculation of "n" and mathematical equations.

"n" means an integer greater than or equal to 0. So 3n is 3 x N, the equation can be interpreted as "(3XN) +3″, which is an integer with n 0 or greater than 0." So we can get
(3 x 0) + 3 = 3 = 3rd Element
(3 x 1) + 3 = 6 = 6th Element
(3 x 2) + 3 = 9 = 9th Element
Wait a minute
: Nth-child (2n+1) is how to calculate that?
(2 x 0) + 1 = 1 = 1st Element
(2 x 1) + 1 = 3 = 3rd Element
(2 x 2) + 1 = 5 = 5th Element
Wait a minute

Hold on! This is the same as "odd"! So "1" is not necessary to appear many times. Now, looking at our original example, we feel the code is a bit more complicated. We can replace "3n+3" with "3n+0" or even "3n".
(3 x 0) = 0 = no match
(3 x 1) = 3 = 3rd Element
(3 x 2) = 6 = 6th Element
(3 x 3) = 9 = 9th Element
Wait a minute

As you can see, we don't need +3 to do the same. We can also use negative numbers. Use subtraction in the equation, such as 4n-1;
(4 x 0) –1 =-1 = no match
(4 x 1) –1 = 3 = 3rd Element
(4 x 2) –1 = 7 = 7th Element
Wait a minute

Using the "-N" value looks a little odd. If the equation calculates a negative value, he does not specify any element tags. As the results show, this is a fairly smart technique, and you can use the "-n+3" option to select the first few element tags.

-0 + 3 = 3 = 3rd Element
-1 + 3 = 2 = 2nd Element
-2 + 3 = 1 = 1st Element
-3 + 3 = 0 = no match
Wait a minute.

www.sitepoint.com site has good parameters to explain and guide, including some manual list. I posted it right here!

N	2n+1	4n+1	4n+4	4n	5n-2	-n+3
0	1	1	4	-	-	3
1	3	5	8	4	3	2
2	5	9	12	8	8	1
3	7	13	16	12	13	-
4	9	17	20	16	18	-
5	11	21st	24	20	23	-

Related articles recommended
: Nth-child ()
Understanding:nth-child Pseudo-class Expressions

Chinese Original: Nth-child () Working principle
The original of English: how Nth-child Works