Mit: nth-Kind, um Kinder LI Elemente durchlaufen

Question

Ok, ich habe eine Situation, wo ich eine Reihe von Farben haben, sagen wir 10.

Jetzt möchte ich durch diese Liste von Farben für Kindelemente durchlaufen und ihnen die Farbe von 1-10 geben; aber ich weiß nicht, wie viele Kinder ich im voraus haben werde, also weiß ich nicht, wie ich damit umgehen soll.

Wie Kind 1 sollte Farbe 1 haben, aber Kind 11 sollte auch Farbe 1 haben (wie die Farbliste hat wieder angefangen) und offensichtlich Kind 2 würde Farbe 2 und Kind 12 würde Farbe 2 bekommen und so weiter und so weiter ...

Beispiel HTML:

<ul> 
    <li>Some Text</li> <!-- Color #1 --> 
    <li>Some Text</li> 
    <li>Some Text</li> 
    <li>Some Text</li> 
    <li>Some Text</li> 
    <li>Some Text</li> 
    <li>Some Text</li> 
    <li>Some Text</li> 
    <li>Some Text</li> 
    <li>Some Text</li> <!-- Color #10 --> 

    <li>Some Text</li> <!-- Color #1 --> 
    <li>Some Text</li>   
    <li>Some Text</li> 
    <li>Some Text</li> 
    <li>Some Text</li> 
    <li>Some Text</li> 
    <li>Some Text</li> <!-- Color #7 --> 
</ul> 

gibt es trotzdem, dies zu tun mit :nth-child oder etwas anderes wie eine Sass-Funktion?

Answer 1

EDIT/EXTENDED ANTWORT

können Sie .your_class:nth-child(10n+1) verwenden, .your_class:nth-child(10n+2) usw. als Selektoren. "10" ist die "Schrittweite": zum Beispiel wäre 3n jedes dritte, also 10n ist jeder zehnte. Die Zählung beginnt standardmäßig bei Null, daher gilt 10n allein für die 10., 20., 30. usw. Die "+1" ist ein Offset von 1.

Um an Nummer eins zu starten, verwenden Sie 10n+1. Dies wählt das 1., 11., 21. usw. Kind aus.

Wenn Sie 10n+2 schreiben, wählt dies die 2., 12., 22., 32. usw. Kind

Sie müssen also 10 Regeln mit verschiedenen Selektoren bei 10n+1 starten, 10n+2 bis zu 10n+10, die die verschiedenen Einstellungen enthalten, die Sie möchten, sich bewerben. Hier

ist ein Beispiel codepen: http://codepen.io/anon/pen/grVvEo