How to Select the Last Child That Doesn\'t Have a Specific Class in CSS?

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:

<tr>

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')

The above is the detailed content of How to Select the Last Child That Doesn\'t Have a Specific Class in CSS?. For more information, please follow other related articles on the PHP Chinese website!