Ich suche nach einer Möglichkeit, Listenelemente mit wechselnden Hintergrundfarben zu versehen. Wenn eine verschachtelte Liste vorhanden ist, werden die Elemente weiterhin abwechselnd angezeigt, das untergeordnete Element wird jedoch eingerückt, ohne dass die Hintergrundfarbe des übergeordneten Elements auf die verschachtelten untergeordneten Elemente übertragen wird.

Klassen können nicht angewendet werden. Auch die Anzahl der Artikel ist variabel. Vorzugsweise sollte es für unendlich viele verschachtelte Listen funktionieren. Ist dies jedoch nicht möglich, sollte eine Kappe auf 3 Tiefen (wie im Bild) ausreichen. Wenn es einfacher ist, divs anstelle von li und ul zu verwenden, ist das auch für mich möglich. Ich bevorzuge reines HTML / CSS.

Da alle meine Experimente nichts gebracht haben, kann ich nur eine JSFiddle mit den verschachtelten Listen liefern.

https: //jsfiddle.net/qmdwpzt8/1

<ul>
<li>Item 1
    <ul>
        <li>Item 1-1</li>
        <li>Item 1-2
            <ul>
                <li>Item 1-2-1</li>
                <li>Item 1-2-2</li>
            </ul>
        </li>
        <li>Item 1-3</li>
    </ul>
</li>
<li>Item 2
    <ul>
        <li>Item 2-1
            <ul>
                <li>Item 2-1-1</li>
            </ul>
        </li>
    </ul>    
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>