Difference between the “nth-child()” and “nth-of-type()” selectors in jQuery
Last Updated :
07 Jul, 2025
When styling elements in HTML, you often want to target specific children in a list, table, or group. Two common CSS pseudo-classes to do this are :nth-child() and :nth-of-type(). In this article, we will discuss all the differences between nth-child() and nth-of-type() selectors in jQuery.
nth-child() Selector: The :nth-child() selector helps you target elements based on their position among all their siblings, no matter what type they are. It counts every kind of element in order like paragraphs, headings, and lists
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(2) {
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>
<p>Hi Geeks</p>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
<li>Node.js</li>
<li>React.js</li>
</p>
</ul>
</body>
</html>
Output:
No <li> will be styled green because:
li:nth-child(2) targets the second child of <ul>, but the second child is a <p>, so no match happens.- All
<li> elements remain in normal browser style (black text on white background).
nth-of-type() Selector: The :nth-of-type() selector in CSS is used to style elements that are the nth child of their parent among elements of the same type. In other words, it ignores different tags and only counts elements with the same tag name, letting you apply styles to a specific position within that type of element.
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(2) {
width: 200px;
background: green;
color: white;
}
</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>
<p>Hi Geeks</p>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
<li>React.js</li>
</ul>
</body>
</html>
Output:
One <li> (“CSS”) will be styled green because:
li:nth-of-type(2) targets the second <li> element inside the <ul>, ignoring other tags like the <p>.- So even though the paragraph is in between, “CSS” is still counted as the second
<li>. - That’s why “CSS” gets the green background and white text, while all other
<li> elements keep their normal style (black text on white background).
Difference between the nth-child() and nth-of-type() selectors:
These two CSS selectors help you target elements based on their position, but they work differently when counting element types.
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. |
Similar Reads
Difference between :first-child and :first-of-type selector in CSS The :first-child and :first-of-type selectors in CSS are used to target specific child elements within a parent. The :first-child selector targets an element if it is the first child of its parent, regardless of type. On the other hand, the :first-of-type selector targets the first occurrence of a s
2 min read
What's the difference between selector and filter() in jQuery? jQuery Selectors: allow us to select and manipulate HTML element(s). It is used to select HTML elements such as ids, classes, types, attributes, etc using jQuery selectors and then add any CSS properties or events to the selected HTML elements. Syntax: For selecting a button tag the syntax would be
2 min read
Difference between ID and Class Selector in jQuery jQuery ID Selector: The #id selector specifies the id for an HTML element to be selected. It should not begin with a number and the id attribute must be unique within a document which means it can be used only one at a time. Syntax: $("#id")id is the element's specific id. Example: The following cod
2 min read
What is the difference between parent() and parents() methods in jQuery ? The jQuery parent() and parents() methods return the elements which are ancestors of the DOM. It traverses upwards in the DOM for finding ancestors. In this article, we will learn about the difference between parent() and parents() methods. parent() Method: The parent() method traverse only one leve
4 min read
Define Selectors in jQuery and What are the types of selectors? Selectors in jQuery: Selectors in jQuery are functions that primarily focus on selecting particular HTML elements and modifying them as per the action they need to perform. These selectors select particular HTML elements as per their name, element type, class, id, attributes or values of attributes,
4 min read
Difference between jquery.size() and jquery.length JQuery.size() method gives us the number of elements present. For Example, if we are calling the size() method for "p" tag, then it will return the number of "p" tags present on our page. Syntax: $(selector).size() Return value: It returns the number of “selector†present. Example: HTML <!DOCTYPE
2 min read