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

Comment sélectionner le "dernier enfant" avec un nom de classe spécifique en CSS

Lorsque vous travaillez avec des sélecteurs CSS, la tâche de cibler le le dernier enfant d'un élément avec une classe spécifique peut parfois survenir. Considérez le code HTML suivant :

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

Notre objectif est d'appliquer un style au dernier enfant du

éléments avec la classe "list". L'approche courante consistant à utiliser ul li:nth-child(3) peut ne pas toujours être applicable, car la position de l'élément souhaité peut varier.

Pour surmonter ce problème, nous pouvons exploiter les sélecteurs d'attributs. Voici comment procéder :

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

Dans ce sélecteur :

• [class~='list'] cible tous les éléments dont l'attribut class contient la chaîne "list" comme un mot entier. Cela permet plusieurs classes avec "list" n'importe où dans la chaîne, quel que soit l'ordre.
• :last-of-type sélectionne la dernière correspondance du sélecteur précédent dans son type. Dans ce cas, il cible le dernier
• élément avec la classe "list".

En combinant ces sélecteurs, nous pouvons efficacement styliser le dernier enfant de la classe spécifiée. Vous pouvez trouver une démonstration pratique et personnelle sur http://codepen.io/chasebank/pen/ZYyeab.

Pour plus de référence sur les sélecteurs d'attributs, consultez ce qui suit ressources :

• http://css-tricks.com/attribute-selectors/
• 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!