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

In CSS, there is often a need to select specific elements based on multiple criteria. One such case is selecting the last child that does not have a particular class. While it may seem straightforward, using only :last-child and :not(.class) selectors does not yield the desired result.

Using :last-child and :not(.class)

The :last-child selector targets the last child of an element, while :not(.class) selects elements that do not have a specified class. However, these selectors cannot be directly combined to achieve the desired effect.

Consider the following example:

The goal is to select the third row, which does not have the "table_vert_controls" class. The following CSS rule will not work:
tr:not(.table_vert_controls):last-child
This rule will select the last row, regardless of whether it has the "table_vert_controls" class or not.
Alternative Solutions
Since CSS selectors alone cannot handle this specific combination, alternative solutions are required:
Use of an additional class: Add an additional class to the element before the desired class, such as "last-child-no-class". Then, use the following rule:
.last-child-no-class:not(.table_vert_controls)
jQuery selector: Utilize jQuery's more powerful selector engine to select the desired element:
$('tr:not(.table_vert_controls):last')