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

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

À la recherche d'une solution CSS pour cibler le dernier élément enfant avec un nom de classe spécifique nom de classe, la question pose un défi car le nombre d’éléments enfants peut varier. Cela soulève la crainte que nth-child() ne soit peut-être pas suffisant. JavaScript est également exclu en option.

La solution réside dans la pseudo-classe :last-of-type et les sélecteurs d'attributs.

CSS Code :

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

Explication :

• [class~="list"] : Sélectionne les éléments qui ont le nom de classe « liste » dans le cadre de la valeur de leur attribut de classe (c'est-à-dire, pas nécessairement comme le seul class).
• :last-of-type: Sélectionne les éléments qui sont le dernier enfant de leur type (c'est-à-dire le dernier élément li avec la classe "list ").

En combinant ces sélecteurs, la règle applique un fond noir au dernier élément enfant qui porte le nom de classe « liste », qu'il soit ou non. a d'autres classes ou combien d'éléments enfants sont présents.

Exemple :

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

Dans cet exemple, même si le troisième enfant a une classe supplémentaire, le CSS la règle lui appliquera toujours le fond noir car il s'agit du dernier enfant avec le nom de classe "liste".

Attribut Sélecteurs :

Les sélecteurs d'attributs nous permettent de cibler des éléments en fonction de leurs attributs, y compris les noms de classe. Le sélecteur class~ nous permet de sélectionner des éléments dont le nom de classe contient un mot spécifié (par exemple, si nous avions plusieurs classes nommées "list-item-1", "list-item-2", etc.).

Ressources :

• [Attribut CSS Sélecteurs](http://css-tricks.com/attribute-selectors/)
• [Sélecteurs d'attributs 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!