Ändern von CSS für last <li>

Ich frage mich, ob es eine Möglichkeit gibt, ein CSS-Attribut für das letzte liin einer Liste mithilfe von CSS zu ändern . Ich habe mir überlegt, es zu benutzen :last-child, aber das scheint wirklich fehlerhaft zu sein und ich kann es nicht dazu bringen, für mich zu arbeiten. Ich werde JavaScript verwenden, um dies bei Bedarf zu tun, aber ich möchte wissen, ob sich jemand eine Lösung in CSS ausdenken kann.

:last-childist wirklich die einzige Möglichkeit, dies zu tun, ohne den HTML-Code zu ändern. Vorausgesetzt, Sie können dies tun, besteht die Hauptoption darin, ihm nur eine zu geben class="last-item"und dann Folgendes zu tun:

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

Natürlich können Sie dies in der Sprache der dynamischen Seitengenerierung Ihrer Wahl automatisieren. Außerdem gibt es lastChildim W3C-DOM eine JavaScript-Eigenschaft.

Hier ist ein Beispiel dafür, wie Sie in Prototype das tun, was Sie wollen :

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

Oder noch einfacher:

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

In jQuery können Sie es noch kompakter schreiben:

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

Beachten Sie auch, dass dies ohne Verwendung des eigentlichen CSS-Selektors funktionieren solltelast-child - stattdessen wird eine JavaScript-Implementierung verwendet -, sodass es weniger fehlerhaft und zuverlässiger für alle Browser sein sollte.

Ich habe das mit reinem CSS gemacht (wahrscheinlich, weil ich aus der Zukunft komme - 3 Jahre später als alle anderen: P)

Angenommen, wir haben eine Liste:

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

Dann können wir den Text des letzten Elements leicht rot machen mit:

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

Normalerweise kombiniere ich CSS- und JavaScript-Ansätze, sodass es in allen Browsern außer IE6 / 7 und in IE6 / 7 mit aktiviertem (aber nicht deaktiviertem) JavaScript ohne JavaScript funktioniert, da sie die Pseudoklasse nicht unterstützen :last-child.

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

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

Sie können jQuery verwenden und dies auch so tun

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

Eine Alternative für IE7 + und andere Browser besteht möglicherweise darin, :first-childstattdessen Ihre Stile zu verwenden und umzukehren.

Wenn Sie beispielsweise den Rand für jedes festlegen li:

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

Sie könnten es durch Folgendes ersetzen:

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

Dies funktioniert gut für einige andere Fälle wie Grenzen.

Laut Sitepoint fehlerhaft , :first-childjedoch nur in dem Maße, in dem einige Stammelemente (Doctype oder HTML) ausgewählt werden und möglicherweise die Stile nicht geändert werden, wenn andere Elemente eingefügt werden.

Antwort 2015 : Mit CSS last-of-type können Sie das letzte Element formatieren.

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

Normalerweise erstelle ich dazu eine HTC-Datei (z. B. last-child.htc):

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

Und rufen Sie es aus meiner IE-bedingten CSS-Datei mit:

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

Während ich in meiner Haupt-CSS-Datei Folgendes habe:

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

Eine andere Lösung (wenn auch langsamer), die Ihr vorhandenes CSS-Markup verwendet, ohne eine .last-child-Klasse zu definieren, ist die Bibliothek von Dean Edwards ie7.js.

: last-child ist CSS3 und hat keine IE-Unterstützung, während: first-child CSS2 ist. Ich glaube, das Folgende ist der sichere Weg, um es mit jquery zu implementieren

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

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

wenn Sie mehrere haben

Wenn Sie beispielsweise wissen, dass die Liste drei Li enthält, können Sie Folgendes tun:

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

In IE6 können Sie Ausdrücke verwenden:

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

Ich würde jedoch empfehlen, eine spezielle Klasse oder Javascript (keine IE6-Ausdrücke) zu verwenden, bis der :last-childSelektor eine bessere Unterstützung erhält.