Question 36627 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to apply style for classes – Jquery

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>
Tags:

3

Answers


  1. 0

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

    td.active { 
  background: red;
}
td.active:nth-child(2) { 
  background: yellow;
}
    <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>
    Login or Signup to reply.
  2. 0

    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;
}
    <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 active 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>
     <tr>
       <td class="cell active">7</td>
       <td class="cell active">8</td>
       <td class="cell">9</td>
     </tr>
   </table>
</div>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search