nth-of-type and nth-child Is a pseudo class selector used to select elements in CSS selectors. The difference between them lies in the way of selecting elements and the scope of application.
one nth-of-type (Type Index Selector):
- Syntax:
:nth-of-type(an+b)
- Function: select the nth element of the specified type under the same parent element or the element matching the specified formula rule.
- Example:
div:nth-of-type(2) Select the second under the same parent element <div> Element.
nth-of-type It selects elements according to their types. It selects elements of a specific type under the same parent element according to the specified rules. For example, nth-of-type(3) Indicates that the third element of this type under the same parent element is selected.
two nth-child (Sub element index selector):
- Syntax:
:nth-child(an+b)
- Function: select the nth child element under the same parent element or the child element matching the specified formula rule.
- Example:
li:nth-child(odd) Select an odd number under the same parent element <li> Element.
nth-child Select an element according to its position in all child elements of the parent element, regardless of its type. For example, nth-child(2) Indicates that the second child element under the same parent element is selected, regardless of its type.
Summary of differences between the two:
nth-of-type It is selected according to the type of element, and nth-child It is selected according to the position of the element in all child elements of the parent element. nth-of-type Only the specified type elements under the same parent element will be considered, while nth-child All child elements of the parent element are considered. nth-of-type For a particular type of element, and nth-child This applies to any type of child element.
in summary, nth-of-type and nth-child The difference lies in the way of selecting elements and the scope of application. You can select appropriate selectors to match and operate corresponding elements according to specific needs.
