Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use nth in css". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor learn how to use nth in css.

Nth usage: 1, ": nth-child (n)" matches the nth child element; 2, ": nth-last-child (n)" matches the nth child element; 3, ": nth-of-type (n)" matches the nth child element of the same kind; 4, ": nth-last-of-type (n)".

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

What is the use of nth in css

1. Nth-child (n)

The nth-child (n) selector matches the nth child element of the parent element, and there is no restriction on the element type.

N can be a number, a keyword, or a formula.

Examples are as follows:

123 p:nth-child (2) {background:#ff0000;} this is a title

This is the first paragraph.

This is the second paragraph.

This is the third paragraph.

This is the fourth paragraph.

Note: Internet Explorer 8 and earlier browsers do not support the nth-child () selector.

Output result:

2. Nth-last-child (n)

The nth-last-child (n) selector matches each element of the Nth child element of its element, regardless of the type of element, counting from the last child element.

N can be a number, a keyword, or a formula.

Examples are as follows:

123 p:nth-last-child (2) {background:#ff0000;}

The first paragraph.

The second paragraph.

The third paragraph.

The fourth paragraph.

Note: Internet Explorer 8 and earlier browsers do not support the nth-last-child () selector.

Output result:

3. Nth-of-type (n)

The nth-of-type (n) selector matches the nth sibling element of the same type.

N can be a number, a keyword, or a formula.

Examples are as follows:

123 p:nth-of-type (2) {background:#ff0000;} This is a heading

The first paragraph.

The second paragraph.

The third paragraph.

The fourth paragraph.

Output result:

4. Nth-last-of-type (n)

The nth-last-of-type (n) selector matches the last sibling element of the same type.

N can be a number, a keyword, or a formula.

Examples are as follows:

123 p:nth-last-of-type (2) {background:#ff0000;} This is a heading

The first paragraph.

The second paragraph.

The third paragraph.

The fourth paragraph.

Note: Internet Explorer 8 and earlier browsers do not support the nth-last-of-type () selector.

Output result:

At this point, I believe you have a deeper understanding of "how to use nth in css". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.