Detailed explanation of css pseudo-class nth-child() example

This article brings you a detailed explanation of the css pseudo-class nth-child() example, so that everyone can understand what the nth-child() pseudo-class can do. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The nth-child() pseudo-class in CSS3 is very useful for creating formatted Excel stylesheets in HTML. Also used to generate grid layouts without having to resort to tables.

First of all, let’s learn about the nth-child() pseudo-class. [Recommended related video tutorials: css tutorial, css3 tutorial! 】

The basic rules of nth-child() pseudo-class:

The syntax we use is: nth-child (a n b) where a is the frequency and b is the initial offset. This generates an infinite series starting at n = 0, but containing only positive values.

Some examples might make this clearer:

2n, 2n 0
2,4,6,8,10,12......

2n 1 or odd number
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......

3n, 3n 0 or 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 by a for each value. Skipping any zero or negative results means we can't look backwards in the DOM tree.

Example of nth-child() pseudo-class:

Next let’s take a look at the nth-child() pseudo-class through examples Function:

Example 1: Used with hover

This example uses the nth-child pseudo-class and ~ 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:

#stage div {
    float: left;
    margin: 5px;
    width: 60px;
    height: 50px;
    background: #efefef;
}
#stage div:hover { background: red; }
#stage div:nth-child(10n+1) { clear: left; }

In HTML , we added an id to each div container (#div1, #div2, ..., #div100) and then assigned a hover event like this:

#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; 
}
...

This means when the cursor When on a div, every nth sibling of this div will turn yellow. For example, when the mouse hovers over the number 3 (#div3), it turns red, and every div that is a multiple of 3 turns yellow. Try it, let’s see the effect:

Example 2: Use nth-child to format the table

In CSS A more typical example is how to format HTML tables to make them look more professional. For example: Alternating column or row colors:

While not very pretty, the markup is very simple and you can easily change the colors. For the 'tartan' table effect, we use a background color that has some alpha transparency, so when the column (red) and row (blue) colors meet, a third (purple) color is produced.

For this example, the class value of the table table is "tartan":

.tartan tr:nth-child(odd) {
    background: rgba(0,0,255,0.5);
}
.tartan td:nth-child(even) {
    background: rgba(255,0,0,0.5);
}

If we want to directly position the intersecting cells so that we can specify other colors without a transparent background, we can also Usage:

.tartan tr:nth-child(odd) td:nth-child(even) {
    background: #fff;
}

This is for the odd cells in all odd rows and the even cells in even rows of the table. Let’s see the effect:

In the above styles, you should notice that we use the abbreviation method of odd and even numbers, which is easier to remember.

Summary: The above is the entire introduction to the use of the nth-child() pseudo-class in this article. You can use the nth-child() pseudo-class yourself to achieve effects and deepen your understanding. I hope it can help everyone learn Helps.

The above is the detailed content of Detailed explanation of css pseudo-class nth-child() example. For more information, please follow other related articles on the PHP Chinese website!