How to combine css selectors
in the below example I used 3 css selectors to traverse 3 levels and can I combine them together or atleast simplify.
document.querySelectorAll('.datagrid .even').querySelectorAll('tbody tr')
...but it will make the browser work a bit harder than your code does, because the first part of your code (
document.querySelector('.datagrid')) will stop looking when it finds the first matching element, and then look for
.even elements only within that. The above looks for all
.even elements that have
.datagrid ancestors. So it may need to search more of the document. Most of the time that doesn't matter, but it's worth pointing out. The above also assumes that there are at least four
.even elements in the first
.datagrid. If there aren't, your code would throw an error (because of the attempt to call
, which would be
null), whereas the above code might throw an error (if there aren't four in total on the page), or might refer to an
.even element in a subsequent
.datagrid rather than the first.
 makes it tricky to combine that with the one that follows. It's tempting to use
.even:nth-of-type(3), but that would be a mistake, because neither of those counts matches for
.even and then takes the third one.
nth-child matches only elements that are both
.even and the third child element of their parent (considering all elements, not just
nth-of-type does the same thing, but only considering other elements that have the same tag. If you have other non-
.even elements with the same tag name, it will be wrong.
Sometimes you hear talk about adding a selector (similar to the
:eq provided by jQuery) to do what you're talking about, but the problem (as I understand it) is it would require a fundamental change to how selector engines process selectors (which is right-to-left). (There's also the problem that jQuery is incredibly widely used, and uses
0 as the first element's index, whereas CSS uses
1 in similar situations. So CSS would have to use something other than
:eq — perhaps
:index? — to avoid confusion.)