web-dev-qa-db-fra.com

Changer de CSS pour le dernier <li>

Je me demande s’il est possible de modifier un attribut CSS pour le dernier li d’une liste utilisant CSS. J'ai étudié l'utilisation de :last-child, mais cela semble vraiment bogué et je ne peux pas le faire fonctionner pour moi. J'utiliserai JavaScript pour faire cela si nécessaire, mais je veux savoir si quelqu'un peut imaginer une solution en CSS.

htmlcsscss-selectorshtml-lists
74
PF1

: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", alors fais:

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

Évidemment, vous pouvez l’automatiser dans le langage de génération de page dynamique de votre choix. En outre, il existe une propriété JavaScript lastChild dans le DOM W3C.

Voici un exemple de ce que vous voulez dans 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"); });

Dans jQuery , vous pouvez l'écrire de manière encore plus compacte:

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

Notez également que cela devrait fonctionne sans utiliser le last-child Sélecteur CSS - une implémentation JavaScript de celle-ci est utilisée - elle devrait donc être moins boguée et plus fiable sur les navigateurs.

101
Lucas Jones

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:

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

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

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

Je combine généralement les approches CSS et JavaScript, de sorte que cela fonctionne sans JavaScript dans tous les navigateurs sauf IE6/7, et dans IE6/7 avec JavaScript activé (mais pas désactivé), car ils ne prennent pas en charge le :last-child pseudo-classe.

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

li:last-child,li.last-child{ /* ... */ }
11
c_harm

Vous pouvez utiliser jQuery et le faire comme ça

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

Une alternative pour IE7 + et d'autres navigateurs peut être d'utiliser :first-child à la place et inversez 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 certains autres cas, comme les frontières.

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

6
DisgruntledGoat

2015 Answer : CSS dernier type vous permet de styliser le dernier élément.

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

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

<attach event="ondocumentready" handler="initializeBehaviours" />
<script type="text/javascript">
function initializeBehaviours() {
  this.lastChild.className += ' last-child';
}
</script>

Et appelez-le à partir de mon IE fichier css conditionnel 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 (quoique plus lente) qui utilise votre balisage CSS existant sans définir de classe .last-child serait Dean Edwards ie7.js library.

3
vise

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

si vous avez plusieurs

  • groupe, il ne sélectionnera que le dernier li.
    • 2
    jaeson

    : last-child est CSS3 et n'a pas IE support tandis 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');
    2
    Lawrence

    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 recommanderais d'utiliser une classe spécialisée ou Javascript (pas les expressions IE6), jusqu'à ce que le :last-child Le sélecteur reçoit un meilleur support.

    0
    strager