How to make it so that the first td with the active class is red, and the second one is yellow
table tr td.active {
background: red;
}<div class="wrapper">
<table>
<tr>
<td class="cell">1</td>
<td class="cell">2</td>
<td class="cell">3</td>
</tr>
<tr>
<td class="cell active">4</td>
<td class="cell in-range">5</td>
<td class="cell in-range">6</td>
</tr>
<tr>
<td class="cell in-range">7</td>
<td class="cell active">8</td>
<td class="cell">9</td>
</tr>
</table>
</div>>Solution :
You will only be able to do it with JS:
//Select the Second active
const element = document.getElementsByClassName('active')[1];
//Apply the yellow color on the second element.
element.style.backgroundColor = 'yellow';
DEMO
//Select the Second active
const element = document.getElementsByClassName('active')[1];
//Apply the yellow color on the second element.
element.style.backgroundColor = 'yellow';td.active {
background: red;
}<div class="wrapper">
<table>
<tr>
<td class="cell">1</td>
<td class="cell">2</td>
<td class="cell">3</td>
</tr>
<tr>
<td class="cell active">4</td>
<td class="cell in-range">5</td>
<td class="cell in-range">6</td>
</tr>
<tr>
<td class="cell in-range">7</td>
<td class="cell active">8</td>
<td class="cell">9</td>
</tr>
</table>
</div>