Comment cibler correctement le dernier élément avec une classe spécifique à l'aide de \'.class:last-of-type\' ?

Comprendre l'utilisation de ".class:last-of-type"

En CSS, le ".class:last-of- Le sélecteur type" est utilisé pour cibler l'élément final d'une classe spécifique au sein d'un élément parent donné. Cependant, il est crucial de noter que cette pseudo-classe fonctionne uniquement sur les éléments, ce qui signifie qu'elle ne peut pas être appliquée aux classes.

Dans l'exemple fourni, le sélecteur ".visible:last-of-type" est conçu pour afficher l'élément de paragraphe final (

) qui porte la classe ".visible" dans un div particulier. Cependant, le problème se pose car la classe ".visible" n'est pas attribuée au troisième paragraphe, ce qui le rend invisible.

Correction du problème de sélectivité

Pour résoudre le problème, vous devez modifier le sélecteur pour vous assurer qu'il cible les éléments avec à la fois la classe ".visible" et la position du dernier élément au sein de leur parent immédiat :

p.visible:last-child

Ce sélecteur modifié précisera que les styles doivent être appliqué à l'élément de paragraphe final du div qui possède la classe ".visible".

Exemple de démonstration

Pour illustrer la solution, considérons le code mis à jour suivant :

<code class="css">p {
    display: none;
}
p.visible:last-child {
    display: block;
}</code>

<code class="html"><div>
  <p class="visible">First paragraph.</p>
  <p class="visible">Second paragraph.</p>
  <p class="visible">Third paragraph.</p>
</div></code>

Dans ce code révisé, les trois paragraphes ont la classe ".visible" attribuée et le dernier paragraphe sera affiché.

Conclusion

En comprenant la distinction entre la sélection d'éléments et de classes, vous pouvez utiliser efficacement la pseudo-classe « .class:last-of-type » pour cibler l'élément final correspondant à une classe spécifique dans un conteneur désigné.

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!