Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • Last Updated : 11 Apr, 2022

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.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!