Pouvez-vous sélectionner le dernier élément enfant sans classe spécifique en CSS ?

Combinaison des sélecteurs :last-child et :not(.class) en CSS

En CSS, peut-on sélectionner le dernier élément enfant il manque une classe spécifiée ? Par exemple, en considérant la structure HTML suivante :

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

Comment sélectionner uniquement la quatrième ligne à l'aide des sélecteurs CSS ? Tenter d'utiliser le sélecteur suivant ne suffirait pas :

tr:not(.table_vert_controls):last-child

Malheureusement, il n'est pas possible d'y parvenir en utilisant uniquement les sélecteurs CSS. La pseudo-classe :last-child cible spécifiquement le tout dernier enfant, et il n'existe pas de pseudo-classe :last-of-class comparable.

Depuis 2015, Selectors 4 a introduit une extension pour :nth-child() et :nth-last-child() sélecteurs, permettant l’utilisation de sélecteurs arbitraires comme arguments. Cela permettrait la syntaxe suivante :

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

Cependant, depuis avril 2018, seul Safari prend en charge cette fonctionnalité, la compatibilité généralisée est donc encore dans plusieurs années.

Approches alternatives :

En attendant, des méthodes alternatives doivent être utilisées :

• Ajout d'une classe supplémentaire : Ajoutez une classe précédant immédiatement la classe cible, puis sélectionnez le dernier enfant avec cette nouvelle classe.
• Sélecteur jQuery : Utilisez le sélecteur jQuery :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!