Open In App

Difference between the “nth-child()” and “nth-of-type()” selectors in jQuery

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will discuss all the differences between nth-child() and nth-of-type() selectors in jQuery. 

nth-child() Selector: This selector is used to match the elements based on their position in a group of siblings. It matches every element that is the nth-child, regardless of the type, of its parent.

Syntax:

:nth-child(number) {
    // CSS Property
}

Example: This example describes the uses of nth-child() Selector.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>CSS nth-child() Selector</title>
 
    <style>
        li:nth-child(even) {
            width: 200px;
            background: green;
            color: blue;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h2>
        CSS nth-child() Selector
    </h2>
 
     
<p>Web Technologies Subjects</p>
 
 
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Bootstrap</li>
        <li>Node.js</li>
        <li>React.js</li>
    </ul>
</body>
 
</html>


Output:

nth-of-type() Selector: This Selector is used to style only those elements which are the nth number of children of its parent element. Any n may be a number, a keyword, or a formula.children

Syntax:

:nth-of-type(number) {
    // CSS Property;
}

Example: This example describes the uses of nth-of-type() Selector.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>CSS :nth-of-type() Selector</title>
 
    <style>
        li:nth-of-type(odd) {
            background: green;
            font-weight: bold;
            width: 200px;
            padding: 5px 0;
        }
           
        li:nth-of-type(even) {
            background: red;
            font-weight: bold;
            width: 200px;
            padding: 5px 0;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h2>
        CSS :nth-of-type() Selector
    </h2>
 
     
<p>Web Technologies Subjects</p>
 
 
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Bootstrap</li>
        <li>Node.js</li>
        <li>React.js</li>
    </ul>
</body>
 
</html>


Output:

Difference between the nth-child() and nth-of-type() selectors:

nth-child() Selector

nth-of-type() Selector

This selector is used to style only those elements that are the nth number of child of its parent element.  This selector is used to style only those elements that are the nth number of child of its parent element. 
It is used to selects all elements that are the nth child It is used to select all elements that are the nth child

Its syntax is  -:

:nth-child(n|even|odd|formula)

Its syntax is -:

:nth-of-type(n|even|odd|formula)

It takes 4 Parameters -:
1.  index of each child

2. even child element

3. odd child element

4. formula -: (an + b)

It takes 4 Parameters -:

1.  index of each child

2. even child element

3. odd child element

4. formula -: (an + b)

It does not consider type of the parent while selecting the elements. It only consider a particular type of the parent.


Last Updated : 11 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads