Сочетание: last-child с селектором: not (.class) в CSS

Question

Можно ли выбрать последнего ребенка, который НЕ имеет класса attr?Вот так:

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

Я хочу выбрать третью строку, в данном случае.

Я попробовал следующее, которое не сработало:

tr:not(.table_vert_controls):last-child

Спасибозаранее.

Answer 1

Не только с CSS-селекторами, нет, поскольку :last-child специально смотрит на последний дочерний элемент , и подобного псевдокласса :last-of-class не существует. Смотрите мой ответ на этот связанный вопрос .

По состоянию на конец 2015 года реализации начали медленно добавляться к расширению Selectors 4 до :nth-child() и :nth-last-child(), которые позволяют передавать произвольный селектор в качестве аргумента (подробнее об этом также в обновлении связанного ответа) , После этого вы сможете написать следующее:

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

Несмотря на то, что реализации недавно начали поставляться, все еще потребуется по крайней мере еще несколько лет, чтобы эта поддержка получила широкую поддержку (по состоянию на апрель 2018 года, через два с половиной года после того, как был выпущен первый браузер, Safari остается единственным браузером, который сделал это ). Тем временем вам придется использовать что-то еще, например, дополнительный класс непосредственно перед рассматриваемым классом, или селектор jQuery:

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

Answer 2

Вы можете использовать следующее решение:

tr:not(.table_vert_controls):nth-last-of-type(2)