Können Sie das letzte untergeordnete Element ohne eine bestimmte Klasse in CSS auswählen?

Kombination der :last-child- und :not(.class)-Selektoren in CSS

In CSS kann man das letzte untergeordnete Element auswählen dem fehlt eine bestimmte Klasse? Betrachten wir beispielsweise die folgende HTML-Struktur:

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

Wie kann man mithilfe von CSS-Selektoren nur die vierte Zeile auswählen? Der Versuch, den folgenden Selektor zu verwenden, würde nicht ausreichen:

tr:not(.table_vert_controls):last-child

Leider ist es mit CSS-Selektoren allein nicht möglich, dies zu erreichen. Die Pseudoklasse :last-child zielt speziell auf die ab allerletztes Kind, und es gibt keine vergleichbare :last-of-class-Pseudoklasse.

Ab 2015 führte Selectors 4 eine Erweiterung für :nth-child() und :nth-last-child() ein. Selektoren, die die Verwendung beliebiger Selektoren als Argumente ermöglichen. Dies würde die folgende Syntax ermöglichen:

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

Ab April 2018 unterstützt jedoch nur Safari diese Funktion, sodass eine umfassende Kompatibilität noch einige Jahre auf sich warten lässt.

Alternative Ansätze:

In der Zwischenzeit müssen alternative Methoden eingesetzt werden:

• Hinzufügen einer zusätzlichen Klasse:Fügen Sie eine Klasse unmittelbar vor der Zielklasse hinzu und dann Wählen Sie das letzte Kind mit dieser neuen Klasse aus.
• jQuery-Selektor: Verwenden Sie den jQuery-Selektor:

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

Das obige ist der detaillierte Inhalt vonKönnen Sie das letzte untergeordnete Element ohne eine bestimmte Klasse in CSS auswählen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!