Alternative(n) zu CSS :last-child ?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
attribut
auswahl
code
dom
drittes element
dynamischer anzahl
element
erstes element
funktion
http
last
letzte element
letzten element
letzten listen
liste
machen
starten
url
viertes element
zweites element
-
Hallo
ich habe ine Liste mit dynamischer Anzahl an Listen-Elementen
und möchte im letzten <li> eine besondere CSS-Eigenschaft anwenden
aber mit li:last-child bekomme ich im CSS Validator eine Fehlermeldung (und greift nicht im IE)
ul li { border:none; } ul li:last-child { border-bottom: 1px solid #444444; }
gibt es andere Möglichkeiten um dem letzten Listen-Element
ein anderes CSS zu geben als allen anderen in der Liste?
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Nein GIbt es nicht.
Alternative vorschläge:
-Mit Javascript
-Indem Du dem letzten listen Element ein weiteres class-attribut gibst
-Du könntest Dem <ul>-element dieses Attribut verpassen (border-bottom: zb )
-Mittels php dem letzten li-element dynamisch ein weiteres class-attribut geben
Beitrag zuletzt geändert: 20.10.2011 20:08:37 von simuliertes -
Hallo
habe es mit JavaScript versucht, klappt aber leider nicht
<script type="text/javascript"> function highlightLastLI() { var liList, liTag; var ulTag = document.getElementsByTagName("#menue ul"); liList = ulTag.getElementsByTagName("li"); liTag = liList[liList.length - 1]; liTag.className = "last"; } </script>
die Liste steckt in einem DIV mit id menue
<div id="menue"> <ul> <li>Erstes Element</li> <li>Zweites Element</li> <li>Drittes Element</li> <li>Viertes Element</li> </ul> </div>
die CSS Klasse für das letzte Element habe ich als .last
.last {
border-bottom: 1px solid #444444;
}
wenn ich dem letzten Element per Hand die Klasse zuweise
<li class="last">Viertes Element</li>
dann geht es
was ist falsch im JS ?
-
mhban schrieb:
Hallo
habe es mit JavaScript versucht, klappt aber leider nicht
[...]
was ist falsch im JS ?
Das geht:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> function highlightLastLI() { var liList, liTag; var ulTag = document.getElementById("menue"); liList = ulTag.getElementsByTagName("li"); liTag = liList[liList.length - 1]; liTag.className = "last"; } </script> </head> <body onLoad="highlightLastLI()"> <div id="menue"> <ul> <li>Erstes Element</li> <li>Zweites Element</li> <li>Drittes Element</li> <li>Viertes Element</li> </ul> </div> </body> </html> -
aha
also Quasi als Selektor nur menue und die Funktion mit onLoad starten
wusste nicht das man zur Auswahl ein DOM Element überspringen kann (ul)
und muss ich es mit onLoad machen oder kann ich den Code einfach ohne Funktion schreiben?
so das es "von selber" ausgeführt wird ? ... denn onLoad im Body gefällt mir garnicht
-
mhban schrieb:
aha
also Quasi als Selektor nur menue und die Funktion mit onLoad starten
wusste nicht das man zur Auswahl ein DOM Element überspringen kann (ul)
Das macht die Funktion getElementsByTagName (der Name sagt es ja eigentlich bereits).
Hier werden innerhalb des Knotens mit der id menue alle <li>-tags ausgewählt.
mhban schrieb:
und muss ich es mit onLoad machen oder kann ich den Code einfach ohne Funktion schreiben?
so das es "von selber" ausgeführt wird ? ... denn onLoad im Body gefällt mir garnicht
Du kannst es auch so machen (ich habe jetzt auch mal style attribute für last vergeben):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> .last{border-bottom: red 1px solid; display: inline;} </style> <script type="text/javascript"> function highlightLastLI() { var liList, liTag; var ulTag = document.getElementById("menue"); liList = ulTag.getElementsByTagName("li"); liTag = liList[liList.length - 1]; liTag.className = "last"; } window.onload = highlightLastLI; </script> </head> <body > <div id="menue"> <ul> <li>Erstes Element</li> <li>Zweites Element</li> <li>Drittes Element</li> <li>Viertes Element</li> </ul> </div> </body> </html> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
