Selector for multiple tr elements

Question

I have a HTML table with around 100 rows. I want to color some group of rows differently. For example row 1-10 red, row 20-40 blue and so on.

I think I can do it with nth-child but that's a lot of code I think, if I want to select the table rows from 20-50. Is there a way to like select the rows 20-50 and give them a color?

<table id="table">
  <tr>
     <!-- content -->
  </tr
  <!-- 100 tr elements -->   
</table>

`I think I can do it with nth-child but thats a lot of code I think` Not at all. CSS is by far the best and most succinct way to do this. JS should be the last thing you use to amend the UI. — Rory McCrossan, Nov 28 '19 at 10:30
https://stackoverflow.com/questions/15639247/css-selector-for-nth-range — KooiInc, Nov 28 '19 at 10:30
@KooiInc I think that could be what I am looking for, thanks — cimbomlu1905, Nov 28 '19 at 10:33

score 1 · Answer 1 · answered Nov 28 '19 at 11:32

You have to define CSS for every group

Check this Snippet

tr:nth-child(n+0) {
  background: blue;
}
tr:nth-child(n+10) {
  background: red;
}
tr:nth-child(n+20) {
  background: yellow;
}
tr:nth-child(n+50) {
  background: grey;
}

<table style="width:100%">
  <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
   <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
   <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
   <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr> <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
   <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
   <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
   <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
   <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
   <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
   <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
   <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
   <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
   <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr> <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
   <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
   <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
   <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
   <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
   <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
   <tr>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
  
</table>

score 0 · Answer 2 · answered Nov 28 '19 at 10:37

You can add into the css something like this

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

this is making the even and odd rows a different color

For more than 2 different options, you use the formula (an + b) where a represents a cycle size, n is a counter (starts at 0), and b is an offset value. Here, we specify a background color for all tr elements whose index is a multiple of 3:

tr:nth-child(3n+0) {background:#999;}
tr:nth-child(3n+1) {background:#CCC;}
tr:nth-child(3n+2) {background:#FFF;}

Selector for multiple tr elements

2 Answers2