Comment sélectionner 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

Lorsque vous travaillez avec CSS, il peut être crucial de sélectionner des éléments spécifiques en fonction de leur position et de leur classe. noms. Cette question explore comment cibler l'élément « dernier enfant » avec un nom de classe particulier.

Problème :

Considérez la structure HTML suivante :

<ul>
    <li>

Le but est de sélectionner le dernier enfant qui porte le nom de classe "liste" et d'appliquer un style spécifique à

Solution proposée (qui ne fonctionne pas) :

ul li.list:last-child{background-color:#000;}

Inconvénient :

La solution proposée est incorrect car CSS ne prend pas en charge le sélecteur :last-child pour les éléments avec des classes.

Fonctionnement Solution :

Le problème peut être résolu à l'aide d'un sélecteur d'attribut :

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

Explication :

• [class~=list] : Ce sélecteur d'attribut correspond aux éléments qui ont le nom de classe "list" ou tout autre nom de classe contenant la chaîne "list."
• :last-of-type : Cette pseudo-classe sélectionne le dernier élément d'un type particulier, dans ce cas, l'élément li.

Avantages :

• Cela fonctionne même lorsque la classe "list" n'est pas la dernière classe du élément.
• Il ne nécessite pas de connaître la position exacte de l'élément cible.

Remarques importantes :

• Évitez d'utiliser ul li:nth -child(3) car le nombre d'enfants peut varier.
• JavaScript n'est pas autorisé pour cela solution.

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!