How to use the css pseudo-class nth-child ()
Today, the editor will share with you the relevant knowledge points about how to use the css pseudo-class nth-child (). The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.
The nth-child () pseudo class in CSS3 is useful for creating formatted Excel stylesheets in HTML. It is also used to generate grid layouts without resorting to tables.
First of all, let's take a look at the nth-child () pseudo class.
The basic rules of the nth-child () pseudo class:
The syntax we use is: nth-child (an+b) where an is the frequency and b is the initial offset. This results in an infinite series starting at naught 0, but contains only positive values.
Some examples may make this clearer:
2nBET 2n0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2nB0,2n
2,4,6,8,10,12.
2n+1 or Odd
1,3,5,7,9,11.
2n+2
2,4,6,8,10,12.
2n+3
3,5,7,9,11,12.
2n+4
4,6,8,10,12,14.
3nBY 3n0or 3n+3
3,6,9,12,15,18.
3n+1
1,4,7,10,13,16.
So, you can see that the series starts with b and then increases a for each value. Skipping any zero or negative results means we can't look back in the DOM tree.
An example of the nth-child () pseudo class:
Let's take a look at the role of the nth-child () pseudo class through an example:
Example 1: used with hover
This example uses the nth-child pseudo-class and the general sibling selector.
First, we create the grid by simply floating multiple div containers to the left and using nth-child to start a new row after every ten boxes:
# stagediv {
Float:left
Margin:5px
Width:60px
Height:50px
Background:#efefef
}
# stagediv:hover {background:red;}
# stagediv:nth-child (10n+1) {clear:left;}
In HTML, we added an id for each div container (# div1,#div2,...,#div100), and then assigned a hover event, as shown below:
# div1:hover~div:nth-child (1n) {
Background:yellow
}
# div2:hover~div:nth-child (2n) {
Background:yellow
}
# div3:hover~div:nth-child (3n) {
Background:yellow
}
# div4:hover~div:nth-child (4N) {
Background:yellow
}
...
These are all the contents of this article entitled "how to use css pseudo-class nth-child ()". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
