CODEWITHSUNDEEP
csscss-selectors
Ortund
Ortund

Reputation: 8245

How can I use CSS to highlight alternating groups of 10 rows in my table?

Data in my website is logically grouped in batches of 10 rows so I'd like to highlight alternating batches of 10 rows by setting a background color on the them.

Normally, such highlighting is done to alternate every other row like this:

table tr:nth-child(2n+2) { background: #c0c0c0; }

How can I use nth-child to highlight alternating groups of 10 rows?

The best I've managed to do is to highlight every 10th row in this fiddle

https://jsfiddle.net/ppa910o8/

Upvotes: 2

Views: 376

Answers (4)

Brett Pontarelli
Brett Pontarelli

Reputation: 1728

The general principle is to double the grouping size for the #n part and then target n items using the following:

table tr:nth-child(20n+1),
table tr:nth-child(20n+2),
table tr:nth-child(20n+3),
table tr:nth-child(20n+4),
table tr:nth-child(20n+5),
table tr:nth-child(20n+6),
table tr:nth-child(20n+7),
table tr:nth-child(20n+8),
table tr:nth-child(20n+9),
table tr:nth-child(20n+10) {
  background: #c0c0c0;
}

Upvotes: 0

Eric Bernier
Eric Bernier

Reputation: 489

You can do the following, using nth-child:

table tr:nth-child(20n-10),
table tr:nth-child(20n-11),
table tr:nth-child(20n-12),
table tr:nth-child(20n-13),
table tr:nth-child(20n-14),
table tr:nth-child(20n-15),
table tr:nth-child(20n-16),
table tr:nth-child(20n-17),
table tr:nth-child(20n-18),
table tr:nth-child(20n-19){
  background: #c0c0c0;
}

Upvotes: 1

Matt Jackson
Matt Jackson

Reputation: 158

I'm not sure if this is exactly what you are looking for, but it should do the trick:

table tr:nth-child(n+10) {
  background: #c0c0c0;
}
table tr:nth-child(n+20) {
  background: #fff;
}
table tr:nth-child(n+30) {
  background: #c0c0c0;
}

Upvotes: 0

j08691
j08691

Reputation: 207901

Use :nth-child() with the format :nth-child(n+10) where you list the groups of 10. For example, :nth-child(n+10), :nth-child(n+20), :nth-child(n+30)... The order of the rules will matter with this method.

table tr {
  background: red;
}
table tr:nth-child(n+10) {
  background: blue;
}
table tr:nth-child(n+20) {
  background: green;
}
<table>
  <tr>
    <td>1</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>2</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>3</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>4</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>5</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>6</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>7</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>8</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>9</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>10</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>11</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>12</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>13</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>14</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>15</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>16</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>17</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>18</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>19</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>20</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>21</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>22</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>23</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>24</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>25</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>26</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>27</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>28</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>29</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>30</td>
    <td>a</td>
    <td>b</td>
  </tr>
</table>

Upvotes: 2

Related Questions