Changement de CSS pour le dernier <li>

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 de :last-child, 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.

Je suis curieux: pourquoi avez-vous besoin de cela?
Salut strager: je fais une barre de navigation et souhaitez les propriétés du dernier élément à être différent, puis le reste d'entre eux.

InformationsquelleAutor PF1 | 2009-08-25

100

: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 Prototype:
```
$$("ul").each(function(x) { $(x.lastChild).addClassName("last-item"); });
```
Ou plus simplement encore:
```
$$("ul li:last-child").each(function(x) { x.addClassName("last-item"); });
```
Dans jQuery, vous pouvez l'écrire, même de manière plus compacte:
```
$("ul li:last-child").addClass("last-item");
```
Notez également que cette devrait de travail sans utiliser le last-child sélecteur CSS - plutôt, un JavaScript de mise en œuvre de il est utilisé - de sorte qu'il devrait être moins buggé et plus fiable dans les navigateurs.
- Nice que vous avez constitué ma réponse dans le vôtre après je l'ai posté.
- Désolé, j'étais dans le milieu de l'affichage JQuery équivalent du Prototype de code que j'avais déjà posté. Si vous le souhaitez, je peux modifier le JQuery partie.
- Pas de problème. J'étais en train de dire qu'il valide, au moins en partie de la façon dont je l'ai fait.
- Encore désolé pour le malentendu :). Techniquement, votre code est 10x mieux - cela fonctionne réellement! (Faute de frappe sera corrigé dans les 10..9..)
- jQuery n'est laisser le navigateur de la gestion de la sélection si elle comprend :last-child bien.
InformationsquelleAutor Lucas Jones
50

Je l'ai fait avec de la pure CSS (probablement parce que je viens du futur - 3 ans plus tard que tout le monde 😛 )

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>
```
Alors on peut facilement faire le texte du dernier élément rouge avec:
```
ul#nav li:last-child span {
   color: Red;
}
```
- De loin la solution la plus propre (si pris en charge bien évidemment).
- Le sélecteur de fait le truc "ul#nav li:last-child span œuvres" et "#nav li:last-child span" ne fonctionne pas. Bien que, techniquement, les deux points de la même élément , le premier est plus spécifique. Salue à l' "l'homme de l'avenir"
- +1 pour "l'homme de l'avenir" 😉 - bien que strictement parlant, deux ans que vous êtes un homme du passé 😛
InformationsquelleAutor pano
11

J'ai l'habitude de combiner CSS et JavaScript approches, de sorte qu'il fonctionne sans JavaScript dans tous les navigateurs, mais IE6/7, et dans IE6/7 avec JavaScript (mais pas sur), car ils ne supportent pas le :last-child pseudo-classe.
```
$("li:last-child").addClass("last-child");

li:last-child,li.last-child{ /* ... */ }
```
- Juste une petite correction, :dernier enfant ne fonctionne pas sur IE7 ainsi.
- Oups, merci! Mis à jour en conséquence pour la postérité.
InformationsquelleAutor
9

Vous pouvez utiliser jQuery et de le faire en tant que telle façon
```
$("li:last-child").addClass("someClass");
```
InformationsquelleAutor Keith Adler
6

Une alternative 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.

InformationsquelleAutor DisgruntledGoat
4

2015 Répondre: CSS last-of-type vous permet de vous style le dernier élément.
```
ul li:last-of-type { color: red; }
```
InformationsquelleAutor mikemaccana
3

J'ai l'habitude de le faire en créant un fichier htc (ex. dernier enfant.htc):
```
<attach event="ondocumentready" handler="initializeBehaviours" />
<script type="text/javascript">
function initializeBehaviours() {
  this.lastChild.className += ' last-child';
}
</script>
```
Et de l'appeler à partir de mon IE conditionnel fichier css avec:

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

Alors que dans mon fichier css principal j'ai eu:
```
ul li:last-child,
ul li.last-child {
  /* some code */
}
```
Une autre solution (mais plus lent), qui utilise votre existant css balisage sans définir une .dernier enfant de la classe serait de Dean Edwards ie7.js bibliothèque.
- +1 pour le IE7.js chose!
InformationsquelleAutor vise
2

:dernier enfant est CSS3 et n'a pas d'IE de soutien, tout :d'abord l'enfant est CSS2, je crois que ce qui suit est une façon sûre de le mettre en œuvre à l'aide de jquery
```
$('li').last().addClass('someClass');
```
InformationsquelleAutor Lawrence
2

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

si vous avez plusieurs
- groupe
  il ne sélectionnez la dernière li.
InformationsquelleAutor jaeson
0

Si vous le savez, il y a trois li dans la liste, vous êtes en train de regarder, par exemple, vous pourriez faire ceci:
```
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 vous conseille d'utiliser une classe spécialisée ou Javascript (pas IE6 expressions), bien que, jusqu'à ce que le :last-child sélecteur obtient un meilleur soutien.

InformationsquelleAutor strager

Vous devez vous connecter pour publier un commentaire.