Hauptmenü letzter Menüpunkt - border-right wie löschen

Hallo, ich habe in meinem Hauptmenü die einzelnen Menüpunkte über einen border-right-wert im .navigation–link Bereich in der main-navigation.less getrennt (siehe unten). Es soll jedoch vor dem ersten und nach dem letzten Punkt keine Vertikalstrich zu sehen sein. Theoretisch weiss ich, dass das über ein last-child-element mit display:none gemacht wird, aber trotz langem probieren finde ich nicht raus, wie ich das bezüglich des .navigation–link Bereich einsetzen kann. Es wäre sehr nett, wenn mir jemand den passenden Code verraten könnte, dass nach dem letzten Menüpunkt keine border-right erscheint. Hier der aktuelle Code der main-navigation.less meines Themes: @media screen and (min-width: @tabletViewportWidth) { .navigation-main { .navigation--link {border-right: 1px solid white;} } } Herzlichen Dank.

@media screen and (min-width: @tabletViewportWidth) { .navigation-main { .navigation--link { border-right: 1px solid white; &:last-child { border-right:none; } } } } 
1 „Gefällt mir“

[quote=“Neoxx”][quote=“shopmax”] @media screen and (min-width: @tabletViewportWidth) { .navigation-main { .navigation--link {border-right: 1px solid white;} } } [/quote] ganz einfach: @media screen and (min-width: @tabletViewportWidth) { .navigation-main { .navigation--link:last-child {border-right: none;} } } Ist hier erklärt wie das ganze funktioniert mit den childs :slight_smile: http://www.elmastudio.de/programmierung … nth-child/[/quote] An sich richtig - Allerdings sollte man natürlich schon dem LESS Standard folgen :slight_smile: Demnach &:last-child { … wie oben geschrieben :x

[quote=“kayyy”] An sich richtig - Allerdings sollte man natürlich schon dem LESS Standard folgen :slight_smile: Demnach &:last-child { … wie oben geschrieben :x[/quote] Da hast du recht. :smiley:

Hallo kayyy, hallo Neoxx, vielen Dank für Eure rasche Antwort. Ich habe beide Lösungen ausprobiert. Leider ist es so, dass jetzt gar keine border-right der navigation–link mehr angezeigt wird. Irgendwie wird die last child Logik nicht angewendet. So sieht es auch im Firebug aus. Danke

Ja das liegt daran, dass es innerhalb des Elements auch nur ein Kind Element gibt. Es müsste also lauten wie etwa: @media screen and (min-width: @tabletViewportWidth) { .navigation-main { .navigation--entry { border-right: 1px solid white; &:last-child { border-right:none; } } } } So wird direkt das li Element angesprochen und dem letzen li dann kein Border zugewiesen. Möchtest du das ganze direkt dem a Element geben wäre es @media screen and (min-width: @tabletViewportWidth) { .navigation-main { .navigation--entry { .navigation--link { border-right: 1px solid white; } &:last-child { .navigation--link { border-right: none; } } } } }

1 „Gefällt mir“

Fantastisch, jetzt funktioniert´s. Herzlichen Dank für Deine Hilfe und auch Deine Erklärungen. Ich freue mich immer über ein „Dazulernen“.