Is there a standard CSS selector similar to :eq() in jQuery?

Question

I don't know if there is a CSS selector can do the same as the line below (jQuery code):

.tab_cadre_central .top:eq(0) table tbody tr td table tbody tr:eq(3)

I have tried in CSS something like this:

.tab_cadre_central .top::nth-child(0) table tbody tr td table tbody nth-child:eq(3) {
    display:none;
}

but it didn't work.

Answer 1

While jQuery's :eq() uses 0-based indexing, :nth-child() uses 1-based indexing, so you need to increment your indexes appropriately:

.tab_cadre_central .top:nth-child(1) table tbody tr td table tbody tr:nth-child(4)

But you should really think about refactoring that selector...

---

⚠ It's worth noting that although :eq() and :nth-child() can behave similarly - they are certainly not the same. :eq() will select the n+1 th element in the set while :nth-child() will select all elements in the set that are the n th child of their respective parents. ⚠

<div>
    <span></span>
    <span></span>
</div>
<div>
    <span></span>
</div>

The selector div span:nth-child(1) will fetch two elements, while div span:eq(0) will only select one.