CSS3 nth-child pseudo-class usage

CSS3 provides a powerful pseudo-class selector, allowing developers to select elements that meet specific conditions in an object for rendering. These pseudo classes will be very confusing when you are new to them, but after you have mastered them, it will greatly improve your code efficiency and save the amount of code. What I want to talk about today isNth-child pseudo class.

Nth-child pseudo-class definition

The nth-child pseudo-class is defined in W3C to select the nth child element in the parent element. You can useAn + BSelect sub-elements as follows:

Tr: nth-child (2n + 1)/* select the singular row in the table */
Tr: nth-child (odd)/* same as above */
Tr: nth-child (2n)/* select double rows in the table */
Tr: nth-child (even)/* same as above */

The intelligent viewer probably knows what the nth-child pseudo class can do.

CSS3 nth-child pseudo-class application instance-line color change list

Since the nth-child pseudo class allows us to easily select a sub-element in the container, can we use it to do something? Of course, the tables or lists with the largest demand are the rows that change color. Let's take a look at the intermittent color list.

First, determine the HTML structure of the list. I used the simpleUl> liStructure, the Code is as follows

<Ul>
<Li> Project 1 </li>
<Li> Project 2 </li>
<Li> Project 3 </li>
<Li> Project 4 </li>
<Li> Project 5 </li>
<Li> Project 6 </li>
<Li> Project 7 </li>
</Ul>

After the structure of the list is determined, we need to enable the seven li items in ul to change the color of lines according to the rules of the single and double items. Therefore, we useNth-child (2n + 1)OrNth-child (2n)You can select both. My CSS code is as follows:

Ul li {
Background: # 9FF none repeat scroll 0 0;
List-style-image: none;
List-style-position: outside;
List-style-type: none;
Padding: 10px;
Color: #000;
}
Ul li: nth-child (2n + 1 ){
Background: #6F9 none repeat scroll 0 0;
}

Here I chose to make a special rendering of the singular items in the list. below is my effect. You can also refer to this DEMO.

Nth-child pseudo-class Derivation

In addition to nth-child, W3C also provides several derivative pseudo classes based on nth-child definitions. Here we will briefly talk about their usage.

• E: nth-last-child (n ):Select a child element, starting from the last number
• E: nth-of-type (n ):Select a type of child element
• E: nth-last-of-type (n ):Select a type of child element, starting from the number of the last qualified elements
• E: first-child:Select the first child element (this pseudo class is available in CSS2)
• E: last-child:Select the last child element

In the nth-child pseudo-class family, except E: first-child, all other pseudo-classes can only work in browsers that support CSS3, that is to say, there is no effect in the current IE.

Source: http://blog.imbolo.com/css3-nth-child-pseudo-class/