Liste mit verschiedenen Farben

[Wedgy]

Hallo!
Ich möchte eine Liste zur besseren Übersichtlichkeit mit verschiedenfarbigen Zeilen gestalten (also hell/dunkel, damit man beim Lesen die Zeile nicht so leicht verliert).

Das hab ich bisher mit php in einer Schleife gemacht, den Schleifenindex mod 2 genommen und daraus den Index der Hintergrundfarbe bestimmt. Ist also eher unnütz aufwändig.

Gibts da was in CSS, wie das nächste Element aussehen soll oder welche id das nächste Element haben soll, oder komm ich da um JS oder PHP nicht herum?

[Mathias Brodala]

Hallo Wedgy.

Ich möchte eine Liste zur besseren Übersichtlichkeit mit verschiedenfarbigen Zeilen gestalten (also hell/dunkel, damit man beim Lesen die Zeile nicht so leicht verliert).

[…]

Gibts da was in CSS, wie das nächste Element aussehen soll oder welche id das nächste Element haben soll, oder komm ich da um JS oder PHP nicht herum?

Wenn du ältere Browser wie den IE auch unterstützen möchtest, kannst du dein Vorhaben mit CSS allein nicht erreichen.

Ansonsten wäre es derzeit eingeschränkt folgendermaßen lösbar:

<ul>  
  <li>Even</li>  
  <li>Odd</li>  
  <li>Even</li>  
  <li>Odd</li>  
  <li>Even</li>  
</ul>

li,  
li + li + li,  
li + li + li + li + li { /* Even */  
  background:#333;  
  color:#fff;  
}  
li + li,  
li + li + li + li { /* Odd */  
  background:#ccc;  
  color:#000;  
}

Das Prinzip sollte nachvollziehbar sein. Der verwendete Selektor wird unter anderem in http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=SELFHTML erklärt.

In Zukunft wäre es auch einfach wie folgt lösbar:

li:nth-child(even) {  
  background:#333;  
  color:#fff;  
}  
li:nth-child(odd) {  
  background:#ccc;  
  color:#000;  
}

Umgesetzt wird die nth-child-Pseudoklasse momentan leider nur von Konqueror und Safari.

Einen schönen Sonntag noch.

Gruß, Mathias