Using :nth-child to loop through children LI elements [duplicate]

Question

Ok, I have a situation where I have a set list of colors, let's say 10.

Now I want to run through this list of colors for child elements and give them the color from 1- 10; however I don't know how many children I am going to have beforehand so I'm not sure how to handle that.

Like, child 1 should have color 1, but child 11 should also have color 1 (as the color list has started over again) and obviously child 2 would get color 2 and child 12 would get color 2 and so on and so on...

Example 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>

Is there anyway to do this with :nth-child or something else such as a Sass function?

Answer 1

EDIT / EXTENDED ANSWER

You can use .your_class:nth-child(10n+1), .your_class:nth-child(10n+2) etc. as selectors. "10" is the "step size": for example 3n would be every third, so 10n is every tenth. Counting starts at zero by default, so 10n alone would apply to the 10th, 20th, 30th etc. The "+1" is an offset by 1.

To start at number one, you use 10n+1. This will select the 1st, 11th, 21st etc. child.

If you write 10n+2, this selects the 2nd, 12th, 22nd, 32nd etc. child

So you need 10 rules with different selectors starting at 10n+1, 10n+2 up to 10n+10 which contain the different settings you want to apply.

Here is an example:

.container {
  width: 320px;
  height: auto;
  margin: 20px auto;
}
.x {
  float: left;
  width: 60px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
.x:nth-child(10n+1) {
  background: #ff0;
}
.x:nth-child(10n+2) {
  background: #af0;
}
.x:nth-child(10n+3) {
  background: #f0a;
}
.x:nth-child(10n+4) {
  background: #b5f;
}
.x:nth-child(10n+5) {
  background: #2f7;
}
.x:nth-child(10n+6) {
  background: #7df;
}
.x:nth-child(10n+7) {
  background: #4ac;
}
.x:nth-child(10n+8) {
  background: #73f;
}
.x:nth-child(10n+9) {
  background: #7cb;
}
.x:nth-child(10n+10) {
  background: #29f;
}

<div class="container">
  <div class="x">1</div>
  <div class="x">2</div>
  <div class="x">3</div>
  <div class="x">4</div>
  <div class="x">5</div>
  <div class="x">6</div>
  <div class="x">7</div>
  <div class="x">8</div>
  <div class="x">9</div>
  <div class="x">10</div>
  <div class="x">11</div>
  <div class="x">12</div>
  <div class="x">13</div>
  <div class="x">14</div>
  <div class="x">15</div>
  <div class="x">16</div>
  <div class="x">17</div>
  <div class="x">18</div>
  <div class="x">19</div>
  <div class="x">20</div>
  <div class="x">21</div>
  <div class="x">22</div>
  <div class="x">23</div>
  <div class="x">24</div>
  <div class="x">25</div>
  <div class="x">26</div>
  <div class="x">27</div>
  <div class="x">28</div>
  <div class="x">29</div>
  <div class="x">30</div>
  <div class="x">31</div>
  <div class="x">32</div>
</div>