How to select nth element of the same type
There is a pure css way named ==> :nth-of-type
For example to select the 77th td element of each parent in the document the syntax is
td:nth-of-type(77)
For more information about the :nth-of-type selector see the Morzilla developer network if these links will break let me know in a comment below.
//For the element it self see //
https://developer.mozilla.org/nl/docs/Web/CSS/:nth-of-type
//For syntax about all the selections you can make with :nth-child and :nth-of-type see // https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
var result = document.querySelectorAll("table td:nth-of-type(2)");
console.log(result);
<table>
<tr><td>nope</td><td>nope</td></tr>
<tr><td>nope</td><td>here</td></tr>
</table>
UP. Snippet shows that you cannot select TD elements globally, but you can get nth td element in given TR. Is this what you are looking for?
there is selector :nth-of-type(77)
should help you.
nth-child
selector counts all children of given element - including other types of tags. Also css selector counts from 1, when JS querySelector
result array
from 0
I know I can do it with
document.querySelectorAll("td")[nth]
, but I'm looking for a pure css way.
There is no pure CSS equivalent. See Matching the first/nth element of a certain type in the entire document