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 -: 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. |
Please Login to comment...