Home > Article > Web Front-end > Analyze the usage of CSS3 pseudo-class selectors nth-of-type and nth-child, and the difference between them

Analyze the usage of CSS3 pseudo-class selectors nth-of-type and nth-child, and the difference between them

yuliaOriginal: 2018-09-11 10:26:1011635browse

At work, we often use selectors in CSS. There are many types of selectors, such as: ID selectors, class selectors, tag selectors, pseudo-class selectors, etc. So today we will focus on Let’s talk about what nth-child in the pseudo-class selector means, how to use nth-child, and the difference between it and nth-of-type. They are both pseudo-class selectors in CSS3, and many people think they have similar meanings. In fact, they are still different. Next, I will talk to you about the use of CSS3 nth-of-type and nth-child, as well as the differences between them.

1. Definition and usage of nth-child() and nth-of-type()

nth-child(n): Matches the first element in the parent element n sub-elements, there is no restriction on element type.
nth-of-type(n): Matches the nth sibling element of the same type.
n can be a number, a keyword, or a formula, such as: nth-child(odd) odd number,nth-child(even) even number.

The difference between nth-child and nth-of-type is the way to find elements. The former is to find elements at an absolute position among sibling elements, and the latter is to find elements at an absolute position among elements of the same type. The similarity is that both find the element and then match it with the previous selector. The matching method here is the same.
Extend slightly downwards and clarify the search method. No matter how the previous selector changes, the element will be found first and then matched with the previous selector. This means that selectors have nothing to do with how they are searched. Make this clear so you don't get confused by different combinations.

Looking at this definition, you may not be very clear about their differences. Next, we will distinguish them bit by bit through codes and pictures.

2. Give an example of the difference between nth-of-type and nth-child

1. Give the first div five P tags and the second div Five H5 tags, use nth-child(2) and nth-of-type(2) respectively, see if the results are the same, they all change color for the second time.

<style type="text/css">
   p:nth-child(2){color: red ;}
   h5:nth-of-type(2){color: blue;}
 </style>
 <body>
  <div>
   <p>星期一</p>
   <p>星期二</p>
   <p>星期三</p>
   <p>星期四</p>
   <p>星期五</p>
  </div>
  <div>
   <h5>段落一</h5>
   <h5>段落二</h5>
   <h5>段落三</h5>
   <h5>段落四</h5>
   <h5>段落五</h5>   
  </div>
 </body>

Rendering:

2. Now let’s make some changes to the HTML code to make them appear different, CSS styles constant. We changed the first p element and the first h5 element to h4. The code is as follows:

<div>
   <h4>星期一</h4>
   <p>星期二</p>
   <p>星期三</p>
   <p>星期四</p>
   <p>星期五</p>
  </div>
  <div>
   <h4>段落一</h4>
   <h5>段落二</h5>
   <h5>段落三</h5>
   <h5>段落四</h5>
   <h5>段落五</h5>   
  </div>

Rendering:

Analyze the usage of CSS3 pseudo-class selectors nth-of-type and nth-child, and the difference between them

Look, now it is It’s not that the result of nth-of-type(2) has changed, and paragraph 3 has changed color. h5:nth-of-type(2) is looking for the second h5 type element, which is paragraph 3.

3. Continue to change the HTML code. We restore the first p element and the first h5 element, and change the second p element and the second h5 element to h4. The style remains unchanged. What will be the result?

<div>
   <p>星期一</p>
   <h4>星期二</h4>
   <p>星期三</p>
   <p>星期四</p>
   <p>星期五</p>
  </div>
  <div>
   <h5>段落一</h5>
   <h4>段落二</h4>
   <h5>段落三</h5>
   <h5>段落四</h5>
   <h5>段落五</h5>   
  </div>

Rendering:

Analyze the usage of CSS3 pseudo-class selectors nth-of-type and nth-child, and the difference between them

As a result, you can see that nth-child has no effect, and nth-of-type highlights paragraph 3.

Why is this?

nth-child is to find the second element among a bunch of sibling elements, no matter what that element is, as long as it is ranked second. The former div here finds

Tuesday

, and the latter div finds

Paragraph 2

. After it is found, it is matched with the previous selector. If the match is correct, the style is applied. The previous selector is p, which requires the element to be of p type, but here they are all h4, which does not match, and this style will not be applied to both elements.

nth-of-type is to find the second-ranked element among a bunch of sibling elements with the same HTML tag type. In the first div,

Wednesday

is the second-ranked element in the p type; in the latter div,

Paragraph 3

is the second-ranked element in the h5 type. element. After it is found, it is matched with the previous selector. If the match is correct, the style is applied. The previous selector is h5, then only the

paragraph three

element in the latter div has the style applied, but the

Tuesday

in the previous div will not be styled.

Summary: The above introduces the difference between nth-of-type and nth-child in detail, I hope it can help you!

The above is the detailed content of Analyze the usage of CSS3 pseudo-class selectors nth-of-type and nth-child, and the difference between them. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to add shadow effect with css? (code example)Next article：How to add shadow effect with css? (code example)

See more

Analyze the usage of CSS3 pseudo-class selectors nth-of-type and nth-child, and the difference between them

Tuesday

Paragraph 2

Paragraph 3

paragraph three

Tuesday

Related articles