How to apply style for classes

Question

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;
}

MaxiGui · Answer

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;
}

Cédric · Answer

You can select the second child with nth-child().

td.active { 
  background: red;
}
td.active:nth-child(2) { 
  background: yellow;
}

Fabrizio Calderan · Answer

In pure CSS you may use :has() (but it has limited support) and detect every .active element except the first one.

.active {
  background: red;
}

/* make siblings of the first .active element in yellow, if any */
.active ~ .active,

/* every .active element contained in a row that follows another
   row that contains an active element must be in yellow */
tr:has(.active) ~ tr .active {

   background: yellow;
}

How to apply style for classes

3 Answers

DEMO