Can I select first 5 elements every 10 elements?

May 31, 2022

So, I have a table with 20 rows. I want to change color of every 5 elemets. In my head I can do it by select every 10 elements and then select next 5 to change their color from green to grey. I know how to select every 10th , but dont understand how to select 5 next to them. Can you help pls?

css that I use to select every 10th element:

.fl-table tr:nth-child(10n + 1) th {
    background: #324960;
}

Table HTML:

<h2>Responsive Table</h2>
<div class="table-wrapper">
    <table class="fl-table">
        <tbody>
            <tr>
                <th>Header 1</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 2</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 3</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 4</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 5</th>
                <td>Content 1</td>
            </tr>
                <tr>
                <th>Header 1</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 2</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 3</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 4</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 5</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 1</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 2</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 3</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 4</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 5</th>
                <td>Content 1</td>
            </tr>
                <tr>
                <th>Header 1</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 2</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 3</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 4</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 5</th>
                <td>Content 1</td>
            </tr>
        <tbody>
    </table>
</div>

This is how it looks right now: current view

I need to do in red square to be grey too, so it should be 5 grey, then 5 green, then 5 grey etc.: what I want

>Solution :

You have correct formula, your css only missing 2nd, 3rd, 4th and 5th selectors, here is working example:

ul li:nth-child(10n+1),
ul li:nth-child(10n+2),
ul li:nth-child(10n+3),
ul li:nth-child(10n+4),
ul li:nth-child(10n+5) {color:red;}

<ul>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      
    </ul>