✔ Jede xte Zeile färben

[Shooter2k]

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?

<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

 

[ComFreek]

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:

#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

 

[Shooter2k]

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ß

 

[ComFreek]

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

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/

 

[Shooter2k]

Vielen Dank. Funktioniert einwandfrei.