How to Select the Last Element Without a Specific Class in CSS?

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

In CSS, the :last-child selector is used to select the last element in a list of elements. However, it's not possible to use this selector to choose the last child that does not have a specific class attribute.

To achieve this, one might try to use the following selector:

tr:not(.table_vert_controls):last-child

Unfortunately, this selector will not work because :last-child specifically targets the last element in a list, and there is no equivalent :last-of-class pseudo-class.

As of late 2015, Selectors 4 introduced an extension to :nth-child() and :nth-last-child() selectors, allowing for more complex selection. This extension includes the ability to pass an arbitrary selector as an argument:

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

While this approach is more verbose, it provides a more precise and efficient way to select the desired element. However, it's important to note that support for Selectors 4 is still limited.

For browsers that do not support Selectors 4, an alternative approach would be to use a JavaScript selector:

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

This jQuery selector achieves the same result as the Selectors 4 selector. It's worth noting that using JavaScript may introduce performance implications compared to a purely CSS solution.

The above is the detailed content of How to Select the Last Element Without a Specific Class in CSS?. For more information, please follow other related articles on the PHP Chinese website!