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

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

Question:

Is it feasible to select the last child element that lacks a specific class attribute? For instance, consider the following HTML:

<tr...></tr>
<tr...></tr>
<tr...></tr>
<tr>

The objective is to select the third row in this scenario.

Initial Approach:

An initial attempt using CSS selectors was unsuccessful:

tr:not(.table_vert_controls):last-child

Answer:

Pure CSS selectors cannot accomplish this task, as :last-child operates solely on the last child. A comparable :last-of-class pseudo-class is lacking.

Alternative Solutions:

• Selectors 4 Extension: In the near future, support may become available for an expansion to :nth-child() and :nth-last-child() that enables passing an arbitrary selector as an argument. This would allow for the following syntax:

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

• Additional Class: Include an extra class before the problematic class.
• jQuery Selector: Employ a jQuery selector like:

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

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