Is it possible to use :nth-child() or :nth-of-type() with any selector?

Question

Is there a way to select the nth child element that matches (or does not match) any selector? For example, I want to select every odd table row, but in a subset of rows:

table.myClass tr.row:nth-child(odd) {
  ...
}

<table class="myClass">
  <tr>
    <td>Row
  <tr class="row"> <!-- I want this -->
    <td>Row
  <tr class="row">
    <td>Row
  <tr class="row"> <!-- And this -->
    <td>Row
</table>

But :nth-child() seems to just count all tr elements regardless of whether they are of class "row", so I end up with an even "row" element instead of the two elements I'm looking for. :nth-of-type() The same thing happens.

Can anyone explain why?

Answer 1

not real..

Quoted from documentation

It is its own selector and is not combined with a class. In your rule, it only has to satisfy both selectors, so if the :nth-child(even) table row also happens to have the .row class.

Answer 2

This is a very common question that arises due to a misunderstanding of how :nth-child(An B) and :nth-of-type() work.

In level 3 selectors, :nth-child () pseudo-class counts all sibling elements under the same parent. It doesn't just count siblings that match the rest of the selector.

Similarly, :nth-of-type() Pseudo-class Counts sibling elements that share the same element type, which refers to the tag name in the HTML rather than the selector of the rest.

This also means that if all children of the same parent have the same element type, for example, the only child of the table body is the tr element, or the only child of the list element is the child element is a li element, then :nth-child() and :nth-of-type() will behave the same, that is, for each value An B, :nth -child(An B) and :nth-of-type(An B) will match the same set of elements.

In fact, all simple selectors (including pseudo-classes such as :nth-child() and :not()) within a given compound selector will work Independently of each other, rather than looking at a subset of elements that match the rest of the selector.

This also means that there is no concept of order between the simple selectors within each individual compound selector ¹, which means that for example the following two selectors are equivalent of:

table.myClass tr.row:nth-child(odd)
table.myClass tr:nth-child(odd).row

Translated into English, they all mean:

^{(You'll notice I'm using an unordered list here, just to drive home the point)}

Selector level 4 attempts to correct this limitation by allowing :nth-child(An B of S)² accepts any selector argument S, This is also due to how the selectors in a compound selector operate independently of each other, as determined by the existing selector syntax as shown below. So in your case it would look like this:

table.myClass tr:nth-child(odd of .row)

Of course, as a new proposal in a new specification, this may not be implemented until $('table.myClass').each(function() { // Note that, confusingly, jQuery's filter pseudos are 0-indexed // while CSS :nth-child() is 1-indexed $('tr.row:even').addClass('odd'); });

Use appropriate CSS:

table.myClass tr.row.odd {
  ...
}

If you use automated testing tools like Selenium or scrape HTML with tools like BeautifulSoup, many of these tools allow using XPath as an alternative:

//table[contains(concat(' ', @class, ' '), ' myClass ')]//tr[contains(concat(' ', @class, ' '), ' row ')][position() mod 2)=1]

Other solutions using different techniques are left as an exercise to the reader; this is just a brief, contrived example for illustration.

---

¹ _{If you specify a type or universal selector, it must come first. However, this doesn't change the fundamental way selectors work. This is nothing more than a grammatical quirk.}

² _{This was originally proposed as :nth-match(), but since it still only counts the element relative to its sibling, not relative to each elements that match the given selector, which has been repurposed as an extension of the existing :nth-child() since 2014.}