Difference between the “nth-child()” and “nth-of-type()” selectors in jQuery
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
Share your thoughts in the comments
Please Login to comment...