Detailed explanation of CSS nth-child and nth-of-type element search methods

nth-child and nth-of-type are two pseudo-selectors of CSS. In applications, the two are often confused. Let’s take them out and compare them carefully to see how they find elements. This article mainly introduces relevant information that explains in detail the element search methods of CSS nth-child and nth-of-type. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

1. nth-child(n) —— Find the nth child element

2. nth-of-type(n) —— Find the same type The nth element in the element

may not be very clear about their differences based on this definition. Let’s distinguish them bit by bit.

p:nth-child(2) and p:nth-pf-type(2)

HTML code is as follows

<p>
<p style="float:left;width:200px;">
    <p>pgh1</p>
    <p>pgh2</p>
    <p>pgh3</p>
    <p>pgh4</p>
</p>
<p style="float:left;width:200px;">
    <h5>p1</h5>
    <h5>p2</h5>
    <h5>p3</h5>
    <h5>p4</h5>
</p>

Apply two styles respectively, both looking for the second element

p:nth-child(2) {
    color: red;
    font-weight:bold;
}
h5:nth-of-type(2) {
    color: blue;
    font-weight:bold;
}

Result: Both are applied successfully.

Now let’s make some changes to the HTML code to make them look different. We changed the first p element and the first h5 element to label. The code is as follows:

<p>
<p style="float:left;width:200px;">
    <label>pgh1</label>
    <p>pgh2</p>
    <p>pgh3</p>
    <p>pgh4</p>
</p>
<p style="float:left;width:200px;">
    <label>p1</label>
    <h5>p2</h5>
    <h5>p3</h5>
    <h5>p4</h5>
</p>

The style remains unchanged. Now look at the effect and find that nth-of The result of -type(2) has changed, and p3 is highlighted now. This is considered consistent with our logic. h5:nth-of-type(2) is looking for the second element of type h5, which is p3.

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 label. The style remains unchanged. What will be the result?

HTML is as follows:

<p>
<p style="float:left;width:200px;">
    <p>pgh1</p>
    <label>pgh2</label>
    <p>pgh3</p>
    <p>pgh4</p>
</p>
<p style="float:left;width:200px;">
    <h5>p1</h5>
    <label>p2</label>
    <h5>p3</h5>
    <h5>p4</h5>
</p>

CSS unchanged:

##

p:nth-child(2) {
    color: red;
    font-weight:bold;
}
h5:nth-of-type(2) {
    color: blue;
    font-weight:bold;
}

Result: nth-child There is no effect, the nth-of-type highlighted is p3.

Why is this so?

1. 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. Here, p on the left finds 2e1cf0710519d5598b1f0f14c36ba674pgh28c1ecd4bb896b2264e0711597d40766c, and p on the right finds 2e1cf0710519d5598b1f0f14c36ba674p28c1ecd4bb896b2264e0711597d40766c. 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 type p, but here they are all labels, which does not match, and this style will not be applied to both elements.

2. nth-of-type is the second-ranked element found among a bunch of sibling elements with the same HTML markup type (Markup Type). In the p on the left, e388a4556c0f65e1904146cc1a846beepgh394b3e26ee717c64999d7867364b1b4a3 is the second-ranked element in the p type; in the p on the right, 39318b6f72ed39310530dfd69d0078e1p346eb22d0a433f22cff9940d34d5612bf 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 39318b6f72ed39310530dfd69d0078e1p346eb22d0a433f22cff9940d34d5612bf element on the right p will have the style applied, but the e388a4556c0f65e1904146cc1a846beepgh394b3e26ee717c64999d7867364b1b4a3 on the left p will not.

So, 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 a little further 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.

1. p:nth-child(2) Correct: Find the second element, and this element is p. Wrong: Find the second element with p

2. .info:nth-child(2) Correct: Find the second element whose class contains "info". Error: Find the element whose second class contains "info".

3. p:nth-of-type(2) Find the second element of the same HTML tag type, and this element is p (or intuitively, find the second p type Element)

4. .info:nth-of-type(2) Find the second-ranked element of the same HTML tag type, and the class of this element contains "info"

Related recommendations;

Analysis of techniques to improve the efficiency of element search and element deduplication in PHP arrays, php array_PHP tutorial

A brief analysis of the summary of commonly used element search methods in jQuery_jquery

Detailed explanation of the difference between nth-child and nth-of-type in CSS3

The above is the detailed content of Detailed explanation of CSS nth-child and nth-of-type element search methods. For more information, please follow other related articles on the PHP Chinese website!