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

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

Choosing the last child that doesn't have a specific class attribute may seem like a simple task, but it presents a challenge in CSS.

Issue:

Consider the following HTML structure:

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

The goal is to select the third row, which is the last child without the "table_vert_controls" class. However, the following selector doesn't work:

tr:not(.table_vert_controls):last-child

Limitations of CSS Selectors:

CSS selectors, including :last-child, specifically target the last child of an element. However, there is no equivalent pseudo-class for selecting the last child of an element that does not have a particular class.

Solution Using Selectors 4:

In late 2015, Selectors 4 introduced an extension to :last-child that allows passing an arbitrary selector as an argument. This enables the following selector:

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

Browser Support:

While some browsers have begun implementing this extension, it is still not widely supported.

Alternative Solutions:

Until this extension is more widely supported, alternative approaches include:

• Adding an additional class before the "table_vert_controls" class
• Using jQuery: $(tr:not(.table_vert_controls):last)

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