Analyze the usage of CSS3 pseudo-class selectors nth-of-type and nth-child, and the difference between them-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

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

yulia

Sep 11, 2018 am 10:26 AM

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 id="段落一">段落一</h5>
   <h5 id="段落二">段落二</h5>
   <h5 id="段落三">段落三</h5>
   <h5 id="段落四">段落四</h5>
   <h5 id="段落五">段落五</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 id="星期一">星期一</h4>
   <p>星期二</p>
   <p>星期三</p>
   <p>星期四</p>
   <p>星期五</p>
  </div>
  <div>
   <h4 id="段落一">段落一</h4>
   <h5 id="段落二">段落二</h5>
   <h5 id="段落三">段落三</h5>
   <h5 id="段落四">段落四</h5>
   <h5 id="段落五">段落五</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 id="星期二">星期二</h4>
   <p>星期三</p>
   <p>星期四</p>
   <p>星期五</p>
  </div>
  <div>
   <h5 id="段落一">段落一</h5>
   <h4 id="段落二">段落二</h4>
   <h5 id="段落三">段落三</h5>
   <h5 id="段落四">段落四</h5>
   <h5 id="段落五">段落五</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

Two Images and an API: Everything We Need for Recoloring ProductsApr 15, 2025 am 11:27 AM

I recently found a solution to dynamically update the color of any product image. So with just one of a product, we can colorize it in different ways to show

Weekly Platform News: Impact of Third-Party Code, Passive Mixed Content, Countries with the Slowest ConnectionsApr 15, 2025 am 11:19 AM

In this week's roundup, Lighthouse sheds light on third-party scripts, insecure resources will get blocked on secure sites, and many country connection speeds

Options for Hosting Your Own Non-JavaScript-Based AnalyticsApr 15, 2025 am 11:09 AM

There are loads of analytics platforms to help you track visitor and usage data on your sites. Perhaps most notably Google Analytics, which is widely used

It's All In the Head: Managing the Document Head of a React Powered Site With React HelmetApr 15, 2025 am 11:01 AM

The document head might not be the most glamorous part of a website, but what goes into it is arguably just as important to the success of your website as its

What is super() in JavaScript?Apr 15, 2025 am 10:59 AM

What's happening when you see some JavaScript that calls super()?.In a child class, you use super() to call its parent’s constructor and super. to access its

Comparing the Different Types of Native JavaScript PopupsApr 15, 2025 am 10:48 AM

JavaScript has a variety of built-in popup APIs that display special UI for user interaction. Famously:

Why Are Accessible Websites so Hard to Build?Apr 15, 2025 am 10:45 AM

I was chatting with some front-end folks the other day about why so many companies struggle at making accessible websites. Why are accessible websites so hard