2008-09-09 7 views
10

sagen, dass ich eine Liste haben, wie folgt:Gibt es eine Möglichkeit, das letzte Element einer Liste mit CSS auszuwählen?

  • item1
  • item2
  • item3

Gibt es einen CSS-Selektor, der mich direkt auf das letzte Element einer Liste ermöglicht wählen? In diesem Fall Punkt 3.

Prost!

+0

Ich lief früher durch den Li: Last-Kind-Selektor; aber ich kann es nicht verwenden, da es nicht in IE funktioniert. In diesem Fall habe ich keine Kontrolle über den HTML-Code, daher kann ich die ersten und letzten childs nicht entsprechend kennzeichnen. – Marcel

+0

In diesem Fall befürchte ich, dass du das nicht tun wirst, was du willst. Du könntest es mit Javascript tun, wenn du die Kontrolle darüber hast und du die Straße runter gehen willst, aber es ist eine dunkle, gruselige Straße mit Drachen;) –

+0

Die richtige Antwort von der Browserunterstützung im Jahr 2013 ist von OZZIE. Die veraltete Antwort stammt von Glenn Slaven. – gorbysbm

Antwort

15

Nicht, dass ich bewusst bin. Die traditionelle Lösung besteht darin, die ersten & letzten Einträge mit class = "first" & class = "last" zu markieren, damit Sie sie identifizieren können.

Die CSS-psudo-Klasse first-child wird Ihnen das erste Element bringen, aber nicht alle Browser unterstützen es. CSS3 hat last-child too (dies wird derzeit von Firefox, Safari aber nicht IE 6/7/Beta 8 unterstützt)

6

Bis es richtig unterstützt wird, müssen Sie eine Klasse hinzufügen, um "letzte" Elemente, wie vorgeschlagen. Sie müssen dies jedoch nicht manuell tun. Wenn Sie einen JavaScript-Hit nehmen, einen Blick auf entweder:

Entweder wird Vermeiden Sie es, Ihr Markup zu "verschmutzen" und es ist vollkommen akzeptabel, wenn Ihr Stil eine "nette Ergänzung" ist, im Gegensatz zu einem "Muss" -Design-Feature.

+0

Dies scheint immer noch der Fall zu sein, wenn Sie nach x-Plattform-Unterstützung suchen. –

+0

Der zweite Link "Keeping Your ..." funktioniert! –

+0

+1 für jQuery-Referenz. Wenn Sie das Markup nicht kontrollieren, wie es bei vielen Produkt-/Template-Skinning-Übungen der Fall ist, ist dies wirklich der einzige (und einfachste) Weg zum Erfolg mit einer breiten x-Browser-Kompatibilität. – cdonner

3

Die Antwort auf diese Frage sollte aktualisiert werden! IE9 + Firefox (für eine Weile zurück) + Chrome, Safari alle Unterstützung: last-of-type oder last-child