Borislav Hadzhiev
Reading timeยท2 min
Photo from Unsplash
Use the querySelector()
method to get the nth child of an element.
The :nth-child
pseudo-class returns the element that matches the provided
position.
Here is the HTML for the examples.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>bobbyhadz.com</title> </head> <body> <div id="parent"> <div class="child1">Child 1</div> <div class="child2">Child 2</div> <div class="child3">Child 3</div> </div> <script src="index.js"></script> </body> </html>
And here is the related JavaScript code.
const third = document.querySelector('#parent :nth-child(3)'); console.log(third); // ๐๏ธ div.child3 const odd = document.querySelectorAll('#parent :nth-child(odd)'); console.log(odd); // ๐๏ธ [div.child1, div.child3]
The first example uses the
document.querySelector()
method and the
:nth-child()
pseudo-class to select the third child of an element with an id
of parent
.
The :nth-child()
pseudo-class takes a single argument that describes which
elements should be matched.
:nth-child()
.You can narrow things down by only matching an element of a specific type, e.g.
the second positioned div
element.
const second = document.querySelector('#parent div:nth-child(2)'); console.log(second); // ๐๏ธ div.child3
This selector would only match the second div
element in the group of
siblings.
An alternative approach is to get a NodeList
containing the children and use
the
NodeList.item
method to get a node from the list by index.
const children = document.getElementById('parent').children; console.log(children); // ๐๏ธ [div.child1, div.child2, div.child3] const firstChild = children.item(0); console.log(firstChild); // ๐๏ธ div.child1
We accessed the children
property on the parent and got a NodeList
containing the children of the element.
item()
method, to which we can pass the zero-based index of the element we want to select.The item()
method returns a node from a NodeList
by index. If the index is
out of range, a null
value is returned.
Using the item
method is more intuitive, however, the :nth-child()
pseudo-class takes different keyword values, which makes it more flexible:
odd
- matches the siblings whose numeric position is odd - 1, 3, 5, etc.even
- matches the siblings whose numeric position is even - 2, 4, 6, etc.3n
- matches elements in position 3
, 6
, 9
, 12
, etc.The following examples use document.querySelectorAll
to select multiple
elements using the :nth-child()
pseudo-class.
const even = document.querySelectorAll('#parent :nth-child(even)'); console.log(even); // ๐๏ธ [div.child2] const odd = document.querySelectorAll('#parent :nth-child(odd)'); console.log(odd); // ๐๏ธ [div.child1, div.child3] const every2 = document.querySelectorAll('#parent :nth-child(2n)'); console.log(every2); // ๐๏ธ [div.child2]
The third example selects every 2
elements, e.g. elements in positions 2
,
4
, 6
, etc.
Note that indexes are 1-based when using :nth-child()
and zero-based when
using the item()
method.