Modification du CSS pour le dernier

:last-child est vraiment le seul moyen de le faire sans modifier le code HTML – mais en supposant que vous puissiez le faire, l’option principale consiste simplement à lui donner un class="last-item" , puis à faire:

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

De toute évidence, vous pouvez automatiser cela dans le langage de génération de page dynamic de votre choix. De plus, il existe une propriété JavaScript lastChild dans le DOM W3C.

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

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

Ou plus simplement:

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

Dans jQuery , vous pouvez l’écrire encore plus compactement:

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

Notez également que cela devrait fonctionner sans utiliser le sélecteur CSS actuel du last-child – plutôt, une implémentation JavaScript de celui-ci est utilisée – il devrait donc être moins bogué et plus fiable sur tous les navigateurs.

Je l’ai fait avec du CSS pur (probablement parce que je viens du futur – 3 ans plus tard que tout le monde: P)

En supposant que nous ayons une liste:

 
 
Category 1
 
Category 2
 
Category 3
  

Ensuite, nous pouvons facilement rendre le texte du dernier élément rouge avec:

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

Je combine habituellement les approches CSS et JavaScript pour que cela fonctionne sans JavaScript dans tous les navigateurs sauf IE6 / 7 et IE6 / 7 avec JavaScript activé (mais pas désactivé), car ils ne supportent pas la pseudo-classe :last-child .

 $("li:last-child").addClass("last-child"); li:last-child,li.last-child{ /* ... */ } 

Vous pouvez utiliser jQuery et le faire de cette façon

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

Une alternative pour IE7 + et les autres navigateurs peut être d’utiliser :first-child place et inverser vos styles.

Par exemple, si vous définissez 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 fonctionnera bien pour d’autres cas comme les frontières.

Selon sitepoint,: bogue du :first-child , mais seulement dans la mesure où il sélectionnera des éléments racine (le doctype ou le html), et ne pourra pas changer de style si d’autres éléments sont insérés.

Je le fais généralement en créant un fichier htc (ex. Last-child.htc):

Et appelez-le depuis mon fichier css conditionnel IE avec:

ul { behavior: url("/javascripts/htc/last-child.htc"); }

Alors que dans mon fichier css principal j’ai:

 ul li:last-child, ul li.last-child { /* some code */ } 

Une autre solution (plus lente) qui utilise votre balisage CSS existant sans définir de classe .last-child serait la bibliothèque Dean Edwards ie7.js.

2015 Réponse : Le dernier type de CSS vous permet de styliser le dernier élément.

 ul li:last-of-type { color: red; } 

: last-child est CSS3 et n’a pas de support IE alors que: first-child est CSS2, je crois que ce qui suit est le moyen sûr de l’implémenter en utilisant jquery

 $('li').last().addClass('someClass'); 

$ (‘li’). last (). addClass (‘someClass’);

si vous avez plusieurs

Si vous savez qu’il y a trois li dans la liste que vous regardez, par exemple, vous pouvez le faire:

 li + li + li { /* Selects third to last li */ } 

Dans IE6, vous pouvez utiliser des expressions:

 li { color: expression(this.previousSibling ? 'red' : 'green'); /* 'green' if last child */ } 

Je recommande toutefois d’utiliser une classe spécialisée ou Javascript (pas les expressions IE6), jusqu’à ce que le sélecteur :last-child reçoive un meilleur support.