✔ Einzelne <li> Listenpunkte gezielt mit CSS ansprechen

[legio_x]

Wenn ich beispielsweise jeden zweiten Absatz nach jeder h3 Überschrift stylen möchte, schrieb ich im CSS:

h3 + p + p {
CSS angaben
} <- spricht jeden zweiten Absatz nach einer h3 Überschrift an.

Nun versuche ich dasselbe für meine Liste

<ul id="liste">
<li>Wert 1</li>
<li>Wert 2</li>
<li>Wert 3</li>
</ul>

Ich versuche nun den zweiten Listenpunkt ebenfalls explizit anzusprechen mit

ul#liste + li + li {
CSS angaben
}

aber es funktioniert nicht. Wa smache ich falsch. gibt es einen Weg dafür, ohne dem Listenpunkt eine eigene Klasse oder id zuweisen zu müssen?

 

[Maik]

Hi,

die Listenpunkte li sind keine Nachbarelemente des ul-Elements, sondern seine Nachfahrenelemente, folglich kann der Selektor in dieser Form auch nicht funktionieren.

 

[Bubblez]

ul>li:first-child+li{
		color: red;
}

Probier das mal. Es nimmt den zweiten LI in der Liste. Allerdings funktioniert der pseudo-Selektor :first-child erst ab IE7, opera und ff haben den aber schon länger intus

 

[Gumbo]

Eine andere Möglichkeit:

ul#liste li:nth-child(2) {
	color: red;
}

Die Unterstützung der :nth-child()-Pseudoklasse ist allerdings noch dürftiger.

 

[Bubblez]

Css3 Selektoren sind bestimmt gut. Aber unterstützt werden sie noch von praktisch keinem Browser, wie du erwähntest ..

Dazu noch folgender interessanter wikipedia Artikel:
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS)