Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use nth-child in CSS, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Nth-child

This pseudo-class is a generic version of first-child and: last-child, which is used to select the nth child element. For example, if you want to select the second child element, you can use: nth-child (2):

Li:nth-child (2) {background: violet;}

Odd and even numbers (odd and even)

In addition to using direct numbers,: nth-child also supports matching child elements in odd and even numbers, which is helpful for setting some dynamic table styles.

: nth-child (odd) the target object is all odd child elements.

: nth-child (even) the target object is all even child elements.

Li:nth-child (odd) {background: gold;}

N-ergover (iterator)

There are more powerful selection rules: nth-child supports selection calculations based on n-ergodic keywords. The value of n starts at 0. Traverses on behalf of every n elements. For example, if we want to select all child elements whose order is a multiple of 3, we can use the following rule:

Li:nth-child (3n) {background: hotpink;}

In the above example, list items of 0 (not actually present), 3, and 6 are selected. 0 is useless in this example, but we will see that it is necessary for n to start at 0.

3n + 1

The above rule can be used to select child elements whose target element is the first and then separated by 3 locations.

Li:nth-child (3n+1) {background: limegreen;}

The 3n+1 rule consists of two parts:

3N Select list items with a multiple of 3 in order.

+ 1 offsets 1 position backward on the basis of the previous selection.

As you can see, the n-trader is very flexible and powerful.

Negative selector (: not)

The negative selector is similar to the: not selector in jQuery. It is a functional selector with parameters. The syntax is as follows:

*: not (FOO)

It indicates that all elements are selected except those that meet the FOO selection criteria. For example, if we want to add the underline to the list item, but do not add the last line (so as not to repeat the boundary line of the list container), we can use: not to achieve:

Li.item:not (: last-child) {border-bottom: 1px solid # dedede;}

Note that the negative selector is not a structured selector, and the description of some online tutorials, such as Mutu.com, is wrong. In addition, negative selectors cannot be nested.

The above is all the contents of the article "how to use nth-child in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.