Existe-t-il un moyen de sélectionner le dernier élément d'une liste avec CSS ?
-
09-06-2019 - |
Question
Disons que j'ai une liste comme suit :
- objet 1
- article2
- article3
Existe-t-il un sélecteur CSS qui me permettra de sélectionner directement le dernier élément d'une liste ?Dans ce cas, point 3.
Acclamations!
La solution
Pas à ma connaissance.La solution traditionnelle consiste à étiqueter le premier et le dernier élément avec class="first" & class="last" afin que vous puissiez les identifier.
La pseudo-classe CSS premier enfant vous obtiendrez le premier élément, mais tous les navigateurs ne le prennent pas en charge.CSS3 aura le dernier enfant aussi (ceci est actuellement pris en charge par Firefox, Safari mais pas IE 6/7/beta 8)
Autres conseils
Jusqu'à ce qu'il soit correctement pris en charge, vous devrez ajouter une classe aux « derniers » éléments, comme suggéré.Cependant, vous n'êtes pas obligé de le faire manuellement.Si vous pouvez tirer un coup de javascript, jetez un œil à :
- le sélecteur jQuery :last-child
- Garder les enfants de vos éléments en phase avec la progéniture (un article listé par Alex Bischoff), une méthode spécifique et plus légère
Les deux éviteront de « polluer » votre balisage et sont parfaitement acceptables si votre style est un « ajout intéressant » par opposition à une fonctionnalité de conception « indispensable ».
La réponse à cette question devrait être mise à jour !IE9 + Firefox (il y a quelque temps) + Chrome, Safari sont tous pris en charge : last-of-type
ou last-child