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


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:


Thanks in advance.

Problem courtesy of: dcastro


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 months if not another year for this to be widely supported. In the meantime, you’ll have to use something else, like an extra class just before the class in question, or a jQuery selector:


Solution courtesy of: BoltClock

View additional discussion.