When I want the perfect use: Nth-child or: Nth-of-type is a little dizzy. The more you understand them, the better CSS rules you can write!
In these simple "recipes" (which are actually expressions) I will repeat the use of a simple list and then select the number. But it's obvious that it's easy to change them to get a similar selector.
Select only the Fifth Element
Li:nth-child (5) {
Color:green;
}
To select the first element, you can use: First-child, or I believe you can also change the above example to achieve.
Select all elements except the previous five
If there are more than 10 elements, it will select more than 5.
Select only the previous 5
Li:nth-child (-n+5) {
Color:green;
}
From the beginning, choose every fourth
Li:nth-child (4n-7) {
/* or 4n+1 * *
Color:green;
}
Select Odd or even
Li:nth-child (Odd) {
Color:green;
}
Li:nth-child (even) {
Color:green;
}
Of course there are two other implementations, you know--God fly
Select the last Element
Li:last-child {
Color:green;
}
Select the second-lowest
Li:nth-last-child (2) {
Color:green;
}
As you can see from this example, the above example also has the second implementation method.
Browser support
Interestingly,: First-child and: Last-child is supported by IE 7, but knows IE9 only supports the remaining selectors. If you are worried about IE, you can use SELECTIVIZR. If your browser compatibility is important to you, please pay attention to when can I use ...
Well, using the CSS3 selector is a fun thing to do, like a simple math problem.
Li:nth-child (n+6) {
Color:green;
}