Combining :last-child with :not(.class) selector in CSS

Question

Is it possible to choose the last child that does NOT have a class attr? Like such:

<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
<tr class="table_vert_controls"> ... </tr>

I want to select the third row, in this case.

I tried the following, which did not work:

tr:not(.table_vert_controls):last-child

Thanks in advance.

Answer 1

Not with CSS selectors alone, no, as :last-child specifically looks at the last child, and there isn't a similar :last-of-class pseudo-class. See my answer to this related question.

As of late 2015, implementations have begun slowly trickling in for Selectors 4's extension to :nth-child() and :nth-last-child() which allow you to pass an arbitrary selector as an argument (more on that also in an update to the linked answer). You will then be able to write the following:

tr:nth-last-child(1 of :not(.table_vert_controls))

Although implementations have recently begun to ship, it will still take at least a few more years for this to be widely supported (as of April 2018, two and a half years after being the first browser to ship, Safari remains the only browser to have done so). In the meantime, you'll have to use something else, like an extra class just before the class in question, or a jQuery selector:

$('tr:not(.table_vert_controls):last')