• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

last-child : letzter link in liste

C

ChillerT

Mitglied
Hallo,

habe folgendes Problem:

HTML
Code: 
<div class="myclass">
<ul>
    <li><a href="#">Testlink1</a></li>
    <li><a href="#">Testlink2</a></li>
    <li><a href="#">Testlink3</a></li>
    <li><a href="#">Testlink4</a></li>
</ul>
</div>

CSS
Code: 
.myclass ul li a { float: left; width: 100px; height: 30px; background-color: #111111; }
.myclass ul li a:hover { float: left; width: 100px; height: 30px; background-color: #222222; }

Nun möchte ich, das der letzte Link, also Testlink 4 eine andere Farbe bekommt.
last-child greift auf das letzte des gleichen Elementes zu, und in jedem li gibt es nur ein "a"-Link, also werden alle ausgewählt.
Wie bekomme ich nun lediglich den letzten ausgewählt?

Vielen Dank im Voraus
 
Du musst das Pseudoelement ":last-child" beim <li> Selektor anwenden und dann sagen, es soll auf <a> angewendet werden.

Code: 
ul li:last-child a {
   background-color: blue;
 }
 
Sehr gut, war irgendwie zu spät für mich :D
Wenn ich jetzt einen aktiven Link habe, welcher per class="active" gesetzt wird,
wie kann ich dann den Hintergrund für den last-child anders für active definieren?

Vielen Dank
 
ChillerT schrieb:
Wenn ich jetzt einen aktiven Link habe, welcher per class="active" gesetzt wird,
wie kann ich dann den Hintergrund für den last-child anders für active definieren?
Zum Vergrößern anklicken....

Äh, wie meinen?

Du möchtest dass bei Testlink1, Testlink4 ne andere Farbe hat, sagen wir blau.
Dann bei testlink 2, soll Testlink4 wieder ne andere Farbe haben, z.B. grün?
 
Zuletzt bearbeitet:
Also,
wenn ein Link aktiv ist, bekommt er die class="active" zugewiesen.
Nun muss ich jedoch einstellen, dass wenn der 4. (letzte) Link mit active gekennzeichnet ist, einen anderen Background bekommt, als die anderen 3.
Verstehst du?
 
Soll die Hintergrundfarbe des letzten Elements nicht überschrieben werden, versuche es mal mit:
Code: 
ul li:last-child a {
   background-color: blue !important;
 }

Ansonsten würden sich Inline-CSS oder JavaScript anbieten.
 
Tronjer, das ist ja schon gelößt, es geht nun um den active link, welcher per class="active" gesetzt wird.

Nun soll also, wenn der letzte li a angesprochen wird UND .active gesetzt ist ein anderer hovereffekt vergeben werden.
 
Verzichte doch auf last-child und gib dem letzten Link eine CSS-Klasse .last. Mit li.last und li.last.active lassen sich unterschiedliche Formatierungen anwenden.
 
ChillerT schrieb:
Nun soll also, wenn der letzte li a angesprochen wird UND .active gesetzt ist ein anderer hovereffekt vergeben werden.
Zum Vergrößern anklicken....

Dann gib mal ein Beispiel mit diesem "class="active". denn der taucht bei deinem Beispiel oben nirgendwo auf.

Meinst du so:

Code: 
<!DOCTYPE html>
<html>

<head>
    <title>Titel</title>

    <meta charset="UTF-8">
<style type="text/css">
ul li:last-child a {
   background-color: red;
 }

 ul li:last-child a:hover {
   background-color: yellow;
 }

.active {
  font-size: large;
}

</style>
</head>

<body>
 <div class="myclass">
<ul>
    <li><a href="#">Testlink1</a></li>
    <li><a href="#">Testlink2</a></li>
    <li><a href="#">Testlink3</a></li>
    <li><a href="#" class="active">Testlink4</a></li>
</ul>
</div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben