Ergänzung mit last-child

  • Guten Nachmittag / Abend


    Ich habe folgenden Code und möchte alle drei Zeilen mit :last-child ergänzen.
    Habe div. probiert aber funktioniert nicht, d.h. normalerweise habe ich margin-right:1rem, aber beim letzten Menü sollte es margin-right:0; sein.
    Ich denke bei der ersten Zeile kann ich das einfach an ...li a direkt anhängen, gibt ...li a:last-child.

    Aber wie mache ich es bei der zweiten und dritten Zeile?
    Oder reicht es, nur die erste Zeile anders zu definieren?


    .main-navigation li a,
    .main-navigation li a:focus,
    .main-navigation li a:active {

    margin-right:0;
    }

  • Solange die Zustände :focus, :active, :hover und Co nicht anders gestaltet werden sollen, reicht es nur das a alleine anzusprechen und diesem die Styles zu zuweisen.


    Aber du könntest das :last-child auch einfach hinter :focus oder :active hängen. Das ist möglich.

  • Komischerweise nützt es mir nichts, wenn ich nur das a anspreche.
    Wenn ich die beiden andern Zeilen (auch) anspreche, passiert etwas, aber leider hat das eine Auswirkung auf alle Elemente, statt nur auf das letzte Element.
    Irgendwo muss wohl ein Fehler in der Schreibweise im Zusammenhang mit :last-child sein.

  • Ach so, sorry. Nicht weitergedacht. :last-child bezieht sich immer auf das Elternelement. Das Elternelement ist in dem Fall li und dort drin ist ja immer nur ein a. Deswegen ist also jedes a das letzte Kindelement.


    Eine Lösung könnte so aussehen:


    CSS
    1. .main-navigation li:last-child a {
    2. margin-right: 0;
    3. }


    Nur das a anzusprechen, sollte funktionieren. Damit meine ich nämlich nicht, dass du nur a:last-child oder so als Selektor nehmen sollst, sondern so:


    CSS
    1. .main-navigation li a {
    2. color: red;
    3. }
    4. .main-navigation li:last-child a {
    5. color: green;
    6. }


    Und selbst so funktioniert es ebenfalls:


    CSS
    1. .main-navigation li a,
    2. .main-navigation li a:focus,
    3. .main-navigation li a:active {
    4. color: red;
    5. }
    6. .main-navigation li:last-child a {
    7. color: green;
    8. }