Comment sélectionner le dernier élément enfant avec une classe spécifique en CSS ?

Sélection du dernier élément enfant avec une classe spécifique en CSS

En CSS, cibler le dernier élément enfant d'un élément parent avec une classe spécifique le nom peut être obtenu à l’aide de sélecteurs d’attributs. Considérez le balisage HTML suivant :

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

Pour sélectionner le dernier élément enfant portant le nom de classe « liste », vous pouvez utiliser le CSS suivant :

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

Comprendre le Sélecteur CSS :

• [class~='list'] correspond à tout élément qui a le nom de classe « liste ». Le nom de la classe peut être placé n'importe où dans l'attribut class de l'élément, qu'il s'agisse de la première, de la deuxième ou de la dernière classe.
• :last-of-type sélectionne le dernier élément enfant qui correspond au sélecteur précédent. Cela garantit que seul le dernier élément enfant portant le nom de classe « list » est ciblé.

Avantages de l'utilisation des sélecteurs d'attribut :

Contrairement aux pseudo-classes CSS comme :nth-child(), les sélecteurs d'attributs offrent les avantages suivants :

• Ils peuvent sélectionner des éléments quelle que soit leur position dans le parent élément.
• Ils peuvent cibler des éléments avec plusieurs classes.

Ressources supplémentaires :

• [W3Schools : last-of -taper Sélecteur](https://www.w3schools.com/cssref/sel_lastoftype.asp)
• [CSS-Tricks : Comprendre les sélecteurs d'attributs](https://css-tricks.com/attribute-selectors/)

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!