Comment styliser le dernier élément enfant avec un nom de classe spécifique en CSS ?

Sélection du "dernier enfant" avec un nom de classe spécifique en CSS

Dans le domaine du style CSS, il est souvent nécessaire de manipuler des éléments en fonction de leur position dans leur conteneur parent. Le défi se pose lorsque nous devons cibler le "dernier enfant" d'un élément avec un nom de classe spécifique.

Considérez la structure HTML suivante :

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list">test3</li>
    <li>test4</li>
</ul>

Le but est d'appliquer un style au dernier

élément qui porte le nom de classe « liste ». Bien que le sélecteur initialement suggéré, ul li.list:last-child, ne fonctionne pas, il existe une solution alternative.

Sélecteurs d'attributs à la rescousse

Sélecteurs d'attributs CSS nous permettent de cibler des éléments en fonction d’attributs spécifiques. Dans ce cas, nous pouvons utiliser le sélecteur [class~='list'] pour cibler les éléments qui ont la classe "list". L'opérateur "~=" correspond à un élément qui possède la classe spécifiée sous la forme d'un mot entier. Cela permet une certaine flexibilité dans les conventions de dénomination des classes, garantissant que plusieurs classes sont prises en compte.

Enfin, la pseudo-classe :last-of-type sélectionne le dernier enfant de son type qui correspond au sélecteur précédent. La combinaison de ces techniques produit le sélecteur de travail suivant :

[class~='list']:last-of-type {
    background: #000;
}

Ce sélecteur correspondra au dernier

élément qui a la classe "list" et applique une couleur de fond noire.

En savoir plus sur les sélecteurs d'attribut :

• [Sélecteurs d'attribut dans les astuces CSS]( http://css-tricks.com/attribute-selectors/)
• [Sélecteurs d'attributs CSS dans W3Schools](http://www.w3schools.com/css/css_attribute_selectors.asp)

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!