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

This article will explain in detail how css uses nth-child and nth-of-type. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

How does nth-child () work?

The nth-child () pseudo class is used to match an element based on a number that represents the position of the element in its sibling. More specifically, the number represents the number of siblings that existed before the element in the document tree (minus 1).

This number is expressed as the function aqb, where n is the index and an and b are any integers we pass. For example, to select each element, we can write any of the following:

: nth-child (1n+0) {/ * style * /}

: nth-child (nasty 0) {/ * style * /}

: nth-child (1n) {/ * style * /}

In addition to using this function, we can also pass an integer, such as: nth-child (1), or the set keyword, odd (odd) or even (even). These keywords are alternatives to writing functional symbols for selecting each odd or even element.

: nth-child (odd) {/ * style of odd elements * /}

: nth-child (2n+1) {/ * style of odd elements * /}

: nth-child (even) {/ * style of even elements * /}

: nth-child (2n+0) {/ * style of even elements * /}

When nth-child () is used alone, you can easily predict which element to choose. For example, use this tag:

Thisisaparagraph.

Thisisaparagraph.

Thisisaparagraph.

Thisisadivider.

Thisisadivider.

Thisisaparagraph.

Thisisaparagraph.

Thisisadivider.

Thisisaparagraph.

Thisisadivider.

If we want to choose the fifth element, div, we can simply write the following

.example:nth-child (5) {background:#ffdb3a;}

This is the end of the article on "how css uses nth-child and nth-of-type". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.