Stefan Trailovic Stefan Trailovic - 3 months ago 8
CSS Question

CSS for tr in table

Is it possible to change backroung color to specific tr in a table?
How can i make so that each tr from id=1 to id=2 is blue, id=2 to id=3 red etc..

I have this code:

<tbody>
<tr id="1"></tr> <-- Blue
<tr></tr> <-- Blue
<tr></tr> <-- Blue
<tr id="2"></tr> <-- Red
<tr></tr> <-- Red
<tr id="3"></tr> <-- Green
<tr></tr> <-- Green
<tr></tr> <-- Green
<tr></tr> <-- Green
</tbody>

Answer

Try this:

[id="1"], [id="1"] ~ tr {
  background-color: blue;
}
[id="2"], [id="2"] ~ tr {
  background-color: red;
}
[id="3"], [id="3"] ~ tr {
  background-color: green;
}
<table>
<tbody>
<tr id="1"><td>foo</td></tr>
<tr><td>foo</td></tr>
<tr><td>foo</td></tr>
<tr id="2"><td>foo</td></tr>
<tr><td>foo</td></tr>
<tr id="3"><td>foo</td></tr>
<tr><td>foo</td></tr>
<tr><td>foo</td></tr>
<tr><td>foo</td></tr>
</tbody>
</table>