jQuery :nth-of-type() Selector
Example
Select each <p> element that is the third <p> element of its parent:
Definition and Usage
The :nth-of-type(n) selector selects all elements that are the nth child, of a particular type, of their parent.
Tip: Use the :nth-child() selector to select all elements that are the nth child, regardless of type, of their parent.
Syntax
Parameter | Description |
---|---|
n | The index of each child to match. Must be a number. The first element has the index number 1. |
even | Selects each even child element |
odd | Selects each odd child element |
formula | Specifies which child element(s) to be selected with a formula (an + b).
Example: p:nth-of-type(3n+2) selects each 3rd paragraph, starting at the 2nd paragraph |
Try it Yourself - Example
Select
each <p> element that is the second <p> element of all <div> elements
How to select
each <p> element that is the second <p> element of all <div> elements.
Using a
formula (an + b)
How to use a formula (an + b) to select different child elements.
Using
"even" and "odd"
How to use even and odd to select different child elements.
Difference between :nth-child(), :nth-last-child(), :nth-of-type() and
:nth-of-last-type()
The difference between p:nth-child(2), p:nth-last-child(2), p:nth-of-type(2) and
p:nth-of-last-type(2).