The difference between nth-child and nth-of-type in CSS3-CSS Tutorial-php.cn

The difference between nth-child and nth-of-type in CSS3

高洛峰

Release： 2017-02-28 13:52:45

Original

1332 people have browsed it

The difference between nth-child and nth-of-type in CSS3 is actually very simple: Why is :nth-of-type called :nth-of-type? Because it is distinguished by "type". That is to say: ele:nth-of-type(n) refers to the nth ele element under the parent element, and ele:nth-child(n) refers to the nth element under the parent element and this element is ele. If If not, the selection fails.

The text may sound rather obscure, but it is easier to understand. Here is a small example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<style>
.demo li:nth-child(2){
color: #ff0000;
}
.demo li:nth-of-type(2){
color: #00ff00;
}
</style>
<body>
<p>
<ul class="demo">
<p>zero</p>
<li>one</li>
<li>two</li>
</ul>
</p>
</body>
</html>

Copy after login

The results are as follows:

The difference between nth-child and nth-of-type in CSS3

In the above example, .demo li:nth-child(2) selects the

one

node, while .demo li:nth-of- type(2) selects the

two

node.

But what if no tags are specified before nth-child and nth-of-type?

.demo :nth-child(2){
color: #ff0000;
}
.demo :nth-of-type(2){
color: #00ff00;
}

Copy after login

What will be the result of this? Look at the html structure:

<ul class="demo">
<p>first p</p>
<li>first li</li>
<li>second li</li>
<p>second p</p>
</ul>

Copy after login

Result:

The difference between nth-child and nth-of-type in CSS3

#As can be seen above, the tag type is not specified before them, and :nth-child(2) selects still the second element, no matter what tag it is. And :nth-type-of(2) selects two elements, which are the second p tag and the second li tag in the parent.demo. It can be seen that when the tag type is not specified, :nth-type -of(2) will select the second of all type tags.

We have already understood the basic uses and differences between nth-child and nth-of-type, so what is n in nth-of-type(n) and nth-child(n)?

nth-of-type(n) and nth-child(n) n can be a number, keyword or formula. Numbers: This is the use of the above examples, so I won’t go into details. Keywords: Odd, even

Odd and even are keywords that can be used to match child elements with odd or even subscripts

Note : The subscript of the first child element is 1

Here, we specify two different background colors for odd and even p elements:

p:nth-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}

Copy after login

Formula: Or arithmetic expression

Use the formula (an + b). Description: Indicates the length of the period, n is the counter (starting from 0), and b is the offset value.

Here, we specify the background color of all p elements whose subscripts are multiples of 3:

p:nth-of-type(3n+0)
{
background:#ff0000;
}

Copy after login

If: nth-of-type(4n+2) is to select all elements whose subscript is a multiple of 4 plus 2

For more related articles on the difference between nth-child and nth-of-type in CSS3, please pay attention to PHP Chinese website!

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

The difference between nth-child and nth-of-type in CSS3