kombinieren: last-child mit: nicht (.class) Selektor in CSS

In CSS müssen häufig bestimmte Elemente basierend auf mehreren Kriterien ausgewählt werden. Ein solcher Fall ist die Auswahl des letzten Kindes, das keine bestimmte Klasse hat. Während es unkompliziert erscheinen mag, liefert nur: Last-Child und: nicht (.class) Selectors das gewünschte Ergebnis nicht.

Verwenden: last-child und: nicht (.class)

] Der: Last-Kind-Selektor zielt auf das letzte Kind eines Elements ab, während: nicht (.class) Elemente ausgewählt, die keine bestimmte Klasse haben. Diese Selektoren können jedoch nicht direkt kombiniert werden, um den gewünschten Effekt zu erzielen.

Betrachten Sie das folgende Beispiel:

 
 Das Ziel ist es, die dritte Zeile auszuwählen, welche hat nicht die Klasse "table_vert_controls". Die folgende CSS-Regel funktioniert nicht: 
 
tr:not(.table_vert_controls):last-child
 
 Diese Regel wird die letzte Zeile auswählen nicht. 
 
 Alternative Solutions 
 
 Da CSS -Selektoren allein diese spezifische Kombination nicht umgehen können, Alternative Lösungen sind erforderlich: 
 
 
  Verwendung einer zusätzlichen Klasse : Fügen Sie dem Element vor der gewünschten Klasse eine zusätzliche Klasse hinzu, wie "last-Child-no-Class". Verwenden Sie dann die folgende Regel: 
 
 
.last-child-no-class:not(.table_vert_controls)
 
 
 $ ('tr: nicht (.table_vert_controls): last')