at: Jede zweite Zeile Hintergrundfarbe zuweisen

Beitrag lesen

Hallo.

und zwar möchte ich jede zweite Zeile einer Tabelle einfärben, ich hab mal gelesen, dass dies mit dem Kind-Selector ">" geht, nur weiß ich nicht mehr wo ich das gelesen hab und wie es funktionieren soll?!

Wenn du eine überschaubare Anzahl von Zeilen hast, funtioniert für <tbody class="zebra"> eine Zuweisung der Bauart:

  
.zebra > * {background-color: white; }  
.zebra > * + * { background-color: yellow; }  
.zebra > * + * + * {background-color: white; }  
.zebra > * + * + * + * { background-color: yellow; }  
.zebra > * + * + * + * + * {background-color: white; }  
.zebra > * + * + * + * + * + * { background-color: yellow; }

Das mag nach viel Code aussehen, aber:

  • CSS kann ebenfalls serverseitig generiert werden.
  • Die Selektoren greifen nicht nur bei Tabellenzeilen, sondern je nach Verwendung der Klasse auch beispielsweise bei Tabellenspalten, Tabellenzellen oder Listeneinträgen.
  • Wenn viele dieser Anwendungsfälle auf einer Seite stehen, fallen viele Klassen-Angaben im HTML-Code weg.
  • Es besteht die Möglichkeit, auch später noch jeder Zeile eine eigene Farbe zu geben, ohne den HTML-Code anfassen zu müssen.
    MfG, at