Changement de CSS pour le Dernier li

Question

Je me demande si il y a un moyen de changer un attribut css pour la dernière li dans une liste à l'aide de CSS. J'ai regardé dans l'aide :dernier enfant, mais cela semble vraiment buggé et je ne peux pas le faire fonctionner pour moi. Je vais utiliser Javascript pour faire cela, si nécessaire, mais je veux savoir si quelqu'un peut trouver une solution en CSS.

Merci pour toute aide!

Answer 1

:last-child est vraiment la seule façon de le faire sans modifier le HTML, mais en supposant que vous pouvez faire, l'option principale est juste pour lui donner un class="last-item", alors:

li.last-item { /* ... */ }

Évidemment, vous pouvez automatiser cette dans la dynamique de génération de la page à la langue de votre choix. Aussi, il y a un lastChild JavaScript propriété dans le DOM du W3C.

Voici un exemple de ce que vous voulez dans le Prototype:

$$("ul").each(function(x) { $(x.lastChild).addClassName("last-item"); });

Ou encore plus simplement:

$$("ul li:last-child").each(function(x) { x.addClassName("last-item"); });

En jQuery, vous pouvez l'écrire, même de manière plus compacte:

$("ul li:last-child").addClass("last-item");

Notez également que cela devrait fonctionner sans l'aide de la réelle last-child sélecteur CSS - JavaScript mise en œuvre de ce - de sorte qu'il devrait être moins buggé et plus fiable dans les navigateurs.

Answer 2

Je l'ai fait avec de la pure CSS (probablement parce que je viens du futur - 3 ans plus tard que tous les autres :P )

En supposant que nous disposons d'une liste:

<ul id="nav">
  <li><span>Category 1</span></li>
  <li><span>Category 2</span></li>
  <li><span>Category 3</span></li>
</ul>

Ensuite, on peut facilement faire le texte du dernier élément rouge avec:

ul#nav li:last-child span {
   color: Red;
}

Answer 3

Vous pouvez utiliser jQuery et le faire de telle façon que

$("li:last-child").addClass("someClass");

Answer 4

L'une des alternatives pour IE7+ et les autres navigateurs peut-être d'utiliser :first-child au lieu de cela, et inverser les styles.

Par exemple, si vous êtes à la définition de la marge sur chaque li:

ul li {
  margin-bottom: 1em;
}
ul li:last-child {
  margin-bottom: 0;
}

Vous pouvez le remplacer par ceci:

ul li {
  margin-top: 1em;
}
ul li:first-child {
  margin-top: 0;
}

Cela fonctionne bien pour certains autres cas, comme les frontières.

Selon sitepoint, :first-child buggy, mais seulement dans la mesure où il permettra de sélectionner certains éléments racine (le doctype ou html), et ne peut pas changer de style si d'autres éléments sont insérés.