last-child – first-child

last-child – first-child

Oft wird bei der Navigation ein Trennstrich gemacht doch beim letzten Element schaut das meist nicht so toll aus! Wie bekommt man diesen weg? Im TYPO3 hab ich immer mit optionsplit gearbeitet doch eigentlich geht es auch noch viel einfacher – mit CSS!\r\nHier ein Beispiel:\r\n\r\n<style>\r\nli {border-right:1px #ccc solid; }\r\nli:last-child { border-right:none; }\r\n</style>\r\n\r\n<ul>\r\n<li>1. Element</li>\r\n<li>2. Element</li>\r\n<li>3. Element</li>\r\n</ul>\r\n\r\n1. Element   |   2. Element   |   3. Element\r\n\r\nDamit bekommt das letzte Element keinen Rahmen auf der rechten Seite und das Menü schaut genau so aus wie wir es haben wollen!\r\n\r\nDas gleiche kann man natürlich auch mit first-child machen!\r\n\r\n<style>\r\nli {border-left:1px #ccc solid; }\r\nli:first-child { border-left:none; }\r\n</style>\r\n\r\n<ul>\r\n<li>1. Element</li>\r\n<li>2. Element</li>\r\n<li>3. Element</li>\r\n</ul>\r\n\r\n1. Element   |   2. Element   |   3. Element

7 Kommentare

  1. http://www.villasetnia.com/
  2. Super Sach mit CSS, aber der IE macht Dir einen Strich durch die Rechnung (wie sollt’s auch anders sein):\r\nhttp://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx

  3. Kommt immer drauf an, für welche Zielgruppe man das einsetzen will: der IE 6 unterstützt diese beiden Pseudo-Klassen nicht

  4. Author

    JA danke – der IE6 spielt da wieder nicht mit – ist aber eh nix neues DANKE für die Infos!

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.