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

This article is a detailed introduction to "what is the way to find nth-child and nth-of-type elements in CSS". The content is detailed, the steps are clear, and the details are properly handled. I hope this article "what is the way to find nth-child and nth-of-type elements in CSS" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of the small editor.

Nth-child and nth-of-type are two pseudo-selectors of css. In practice, the two are often confused. Here, compare them carefully and see how they find elements.

nth-child(n) --Find the nth child element

nth-of-type(n) --Find the nth element of the same type

Looking at this definition, it may not be very clear about their differences. Let's distinguish them little by little.

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

The HTML code is as follows

pgh2

pgh3

pgh4

pgh5

div1 div2 div3 div4

Apply two styles separately, both looking for the second element

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

Results: Both were successfully applied.

Now let's make a few changes to the HTML code to make them look different. Let's change the first p element and the first h6 element to label as follows:

pgh2

pgh3

pgh4

pgh5

div1 div2 div3 div4

Style unchanged, then look at the effect, found nth-of-type(2) results changed, then highlighted is div3. This is also in line with our logic. h6:nth-of-type(2) What you are looking for is the second element of type h6, div3.

Continue to change HTML code. What happens if we restore the first p element and the first h6 element, change the second p element and the second h6 element to label, and leave the style unchanged?

HTML is as follows:

pgh2

pgh3

pgh4

pgh5

div1 div2 div3 div4

CSS unchanged:

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

Result: nth-child has no effect, nth-of-type highlights div3.

Why is this happening?

Nth-child is to find the second element in a bunch of sibling elements, whatever that element is, as long as it ranks second. The div found on the left is pgh3, and the div found on the right is div2. After finding it, match it with the previous selector, and if the match is correct, apply the style. The previous selector is p, which requires the element to be of type p, but both are label, which does not match, and neither element will apply this style.

nth-of-type is the element that finds the same HTML Markup Type second in a bunch of sibling elements. In the div on the left,

pgh4

Is the second element of type p; in the div on the right, div3 is the second element of type h6. After finding it, match it with the previous selector, and if the match is correct, apply the style. The previous selector is h6, so only the div3 element on the right has style applied, and the div on the left has style applied.

pgh4

it will not.

So, the difference between nth-child and nth-of-type is the way elements are looked up. The former is to find an element in an absolute position among sibling elements, and the latter is to find an element in 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, which is the same way.

A little further down, clear search method, then no matter how the previous selector changes, the final is to find the element first and then match with the previous selector. That is, selectors have nothing to do with how they are looked up. Make this clear so you don't get confused by different combinations.

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

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

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

.info:nth-of-type(2) Finds the second element of the same HTML tag type whose class contains "info"

Read here, this article "CSS nth-child and nth-of-type elements what is the way to find" article has been introduced, want to master the knowledge of this article also need to do your own practice to understand, if you want to know more about the content of the article, welcome to pay attention to the industry information channel.

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.