jQuery :nth-of-type() selector
This jQuery selector is used to select the elements that are the nth-child of a particular type of their parent.
We can use the :nth-child() selector to select the elements based on their position regardless of the type of their parent.
The syntax of using the :nth-of-type selector is given as follows.
The values mentioned in the above syntax are defined as follows.
n: The n in the above syntax must be an integer. It represents the index of each child to match. This parameter indicates the selector to select the child present at the specified index value. The index number of the first element is 1.
odd: It selects every odd child element.
even: It selects every even child element.
formula: It selects the child element present at the value of the formula. The formula for finding the different children is an+b.
If we consider a = 2 and b = 1, the formula will be 2n+1, which will only select the elements present at the index value 1, 3, 5, …index. To solve the formula, we can put the value of n as 0, 1, 2, ….n.
Now, let's see an example of using all the parameter values of the :nth-of-type() selector.
In this example, we are using all parameter values of the :nth-of-type() selector. Here, there are many paragraph elements. The buttons will select the paragraph elements related to the values of the selector. Likewise, the first button will select the paragraph with index value 1, the second button will select odd paragraphs, the third button will select the even paragraphs, and the fourth button will select the paragraphs present at index value 3,6,9,…n.Test it Now
After the execution of the above code, the output will be -
After clicking the first button -
After clicking the second button -
After clicking the third button -
After clicking the fourth button -