Comment sélectionner le dernier enfant qui n'a pas de classe spécifique en CSS ?

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

En CSS, il est souvent nécessaire de sélectionner des éléments spécifiques en fonction de plusieurs critères. Un de ces cas est la sélection du dernier enfant qui n'a pas de classe particulière. Bien que cela puisse paraître simple, utiliser uniquement les sélecteurs :last-child et :not(.class) ne donne pas le résultat souhaité.

Utiliser :last-child et :not(.class)

Le sélecteur :last-child cible le dernier enfant d'un élément, tandis que :not(.class) sélectionne les éléments qui n'ont pas de classe spécifiée. Cependant, ces sélecteurs ne peuvent pas être directement combinés pour obtenir l'effet souhaité.

Considérons l'exemple suivant :

<tr>

Le but est de sélectionner la troisième ligne, qui n'a pas le "table_vert_controls " classe. La règle CSS suivante ne fonctionnera pas :

tr:not(.table_vert_controls):last-child

Cette règle sélectionnera la dernière ligne, qu'elle ait ou non la classe "table_vert_controls".

Solutions alternatives

Étant donné que les sélecteurs CSS ne peuvent pas gérer à eux seuls cette combinaison spécifique, des solutions alternatives sont nécessaires :

• Utilisation d'un classe supplémentaire : ajoutez une classe supplémentaire à l'élément avant la classe souhaitée, telle que "last-child-no-class". Ensuite, utilisez la règle suivante :

.last-child-no-class:not(.table_vert_controls)

• sélecteur jQuery : utilisez le moteur de sélection plus puissant de jQuery pour sélectionner l'élément souhaité :

$('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!