What is the difference between CSS nth-of-type and nth-child?

Difference: The two matching elements are different. The ":nth-of-type(n)" selector matches the Nth child element of a specific type that belongs to the parent element. The element type is limited; and The ":nth-child(n)" selector matches the Nth child element belonging to its parent element, and the element type is not limited.

(Recommended tutorial: CSS video tutorial)

1. :nth-child() selection Selector

:nth-child(n) selector matches the Nth child element belonging to its parent element, regardless of the type of element, n can be a number, keyword or formula.

2, :nth-of-type(n)
The :nth-of-type(n) selector matches the Nth child element of a specific type that belongs to the parent element, There are no restrictions on element types; n can be a number, keyword, or formula.

3. Specific differences

First look at the code

##p:nth-of-type (7) The 7th P element under the parent element where the selected p element is located is:

The 7th p

p:nth-child(6) The 6th child element under the parent element where the selected p element is located, and the element is a P element, that is:

The 5th p

Result

4, odd and even can be used to match whether the subscript is an odd number or Keywords for even-numbered child elements

odd selects odd numbers even selects even numbers

1. :nth-child(odd)

The above example p:nth-child(odd): The odd-numbered element is selected under the parent element of P and the element is a P element, so it is the second paragraph

.

and

The fourth paragraph.

(p:nth-child(n) n=3 and n=5)

:nth-child(even)

-The above example p:nth-child(even): The selected is an even-numbered element under the parent element of P and the element is a P element, so it is

the first paragraph.

and

The third paragraph.

and

The fifth paragraph.

(p:nth-child(n) n=2 and n=4 and n=6)

3. :nth-of-type(odd)

   -The above example p:nth-of-type(odd): The odd-numbered P element under the parent element of P is selected, so it is
   

   and

   The third paragraph.

   and

   The fifth paragraph.

   (p:nth-of-type(odd) n=1 and n=3 and n=5)
4. :nth-of-type( even)

   -The above example p:nth-of-type(even): The selected is an even number of P elements under the parent element of P, so it is
   < ;p>The second paragraph.

   and

   The fourth paragraph.

   ( p:nth-of-type(even) n=2 and n=4 )
##5、 :nth-of-type(an b ) and :nth-of-type(an b) The rules are the same as those explained above

a represents the length of the cycle, n is the counter (starting from 0), and b is the offset value.

For example: :nth-of-type(2n 1) is the 1st, 3rd, and 5th P element

For more programming related knowledge, please visit:

Introduction to Programming

! !

The above is the detailed content of What is the difference between CSS nth-of-type and nth-child?. For more information, please follow other related articles on the PHP Chinese website!