Comment sélectionner le dernier enfant sans classe spécifique en CSS ?

Combiner :last-child avec le sélecteur :not(.class) en CSS

Choisir le dernier enfant qui n'a pas de nom spécifique L'attribut de classe peut sembler une tâche simple, mais il présente un défi dans CSS.

Problème :

Considérez la structure HTML suivante :

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

Le but est de sélectionner la troisième ligne, qui est la dernière enfant sans la classe "table_vert_controls". Cependant, le sélecteur suivant ne fonctionne pas :

tr:not(.table_vert_controls):last-child

Limitations des sélecteurs CSS :

Les sélecteurs CSS, notamment :last-child, ciblent spécifiquement le dernier enfant d'un élément. Cependant, il n'existe pas de pseudo-classe équivalente pour sélectionner le dernier enfant d'un élément qui n'a pas de classe particulière.

Solution utilisant les sélecteurs 4 :

En fin 2015, Selectors 4 a introduit une extension pour :last-child qui permet de passer un sélecteur arbitraire comme argument. Cela active le sélecteur suivant :

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

Prise en charge des navigateurs :

Bien que certains navigateurs aient commencé à implémenter cette extension, elle n'est toujours pas largement prise en charge.

Solutions alternatives :

En attendant que cette extension soit plus largement prise en charge, une alternative les approches incluent :

• Ajout d'une classe supplémentaire avant la classe "table_vert_controls"
• Utilisation de 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!