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!
Hier ein Beispiel:
<style>
li {border-right:1px #ccc solid; }
li:last-child { border-right:none; }
</style>
<ul>
<li>1. Element</li>
<li>2. Element</li>
<li>3. Element</li>
</ul>
1. Element | 2. Element | 3. Element
Damit bekommt das letzte Element keinen Rahmen auf der rechten Seite und das Menü schaut genau so aus wie wir es haben wollen!
Das gleiche kann man natürlich auch mit first-child machen!
<style>
li {border-left:1px #ccc solid; }
li:first-child { border-left:none; }
</style>
<ul>
<li>1. Element</li>
<li>2. Element</li>
<li>3. Element</li>
</ul>
1. Element | 2. Element | 3. Element
Danke das Sie diesen Artikel gelesen haben. Sie können nun eine Nachricht hinterlassen oder bestellen den RSS Feed.
Comments
[...] This post was mentioned on Twitter by bins. bins said: last-child – first-child: Notizbuch für Suchmaschinenoptimierung & TYPO3 Entwicklung. Home · Impressum · Kontakt ·… http://bit.ly/d74wea [...]
Super Sach mit CSS, aber der IE macht Dir einen Strich durch die Rechnung (wie sollt’s auch anders sein):
http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx
Kommt immer drauf an, für welche Zielgruppe man das einsetzen will: der IE 6 unterstützt diese beiden Pseudo-Klassen nicht
die Pseudo-Klasse :last-child wird im IE nicht unterstützt, dann lieber :first-child ab IE7. siehe http://kimblim.dk/css-tests/selectors/