Hallo liebes Forum,
ich möchte gerne meine Listenpunkte einfärben. Allerdings nicht jede zweite Zeile sondern jede dritte (xte) Zeile. Leider komme ich mit der "gerade" "ungerade" Variante derzeit nicht weiter. Kann mir jemand helfen?

Code :

1 2 3 4 5 6 7 8

<ul>    <li style="float:left">Farbe grün</li>    <li>Farbe grün</li>       <li style="float:left">Farbe blau</li>    <li>Farbe blau</li> </ul>

Vielen Dank

Hallo Shooter2k,

entweder kannst du das mit JavaScript oder auch mit CSS erledigen.
Mit CSS würde es mit der Pseudo-Klasse nth-child gehen:

Code css:

1 2 3 4

#the-list li:nth-child(3n+1) {     background: lime; }

Als Live-Beispiel auf jsFiddle.net: http://jsfiddle.net/hwAYD/

Hier ist meiner Meinung nach eine sehr gute Erklärung: http://reference.sitepoint.com/css/pseudoclass-nthchild

Hallo ComFreek,
vielen Dank für deine Antwort. Kannst du mir vielleicht dazu ein Javascript Beispiel geben? Leider macht der IE Probleme bei "li:nth-child(3n+1)" in CSS, daher würde ich ein Javascript vorziehen. Gerne auch Jquery.

Am besten für 2x Grün, 2x Blau

Danke
gruß

Ja, der IE macht immer Probleme, aber diese Technik ist eigentlich auch gar nicht so alt, von daher:

Code javascript:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

var listitems = document.getElementById("the-list").getElementsByTagName("li");   var group = 0; var count = listitems.length;   for (var i=0; i<count; i+=2) {     if ( group==0 )     {         listitems[i].style.background = "lime";         if (i+1 < count) listitems[i+1].style.background = "lime";         group = 1;     }     else if ( group==1 )     {         listitems[i].style.background = "blue";         if (i+1 < count) listitems[i+1].style.background = "blue";         group = 0;     } }

Oder wieder live auf jsFiddle: http://jsfiddle.net/hwAYD/2/

Vielen Dank. Funktioniert einwandfrei.