How to select first td of first two rows using css

Question

It's a complicated one I think. Let's see if I'm wrong. I want to select only the td which are marked as "// to be selected" I dont want to apply styles for any other td other than the marked ones. Please help!

<table>
  <tbody>
    <tr>
     <td> // to be selected
      <div>
       <div>
        <table>
         <tbody>
          <tr>
           <td></td>
          </tr>
         </tbody>
        </table> 
       </div>
      </div>
     </td>
   </tr>
   <tr>
     <td> // to be selected
      <div>
       <div>
        <table>
         <tbody>
          <tr>
           <td></td>
          </tr>
         </tbody>
        </table> 
       </div>
      </div>
     </td>
   </tr>
   <tr>
     <td> // to be selected
      <div>
       <div>
        <table>
         <tbody>
          <tr>
           <td></td>
          </tr>
         </tbody>
        </table> 
       </div>
      </div>
     </td>
   </tr>
  </tbody>
</table>

Thanks in Advance!

How about you add a class to the `td` you want to apply styles? — Gellio Gao, Feb 16 '21 at 00:26
The layout is generated automatically and hence I'm unable to assign a CSS class to it. — Jack, Feb 16 '21 at 00:32
Use `td` to set styles to all `td` elements and use `td td` to reset the styles to the nested `td` elements? — Gellio Gao, Feb 16 '21 at 00:36

DCR · Answer 1 · 2021-02-16T01:01:19.993

var table = document.getElementsByTagName('table')[0]
let tbody = table.children[0];

let trs = tbody.children



for (let i = 0; i < trs.length; i++){

  var tdhtml = trs[i].getElementsByTagName('td')[0].innerHTML 
  
  trs[i].getElementsByTagName('td')[0].innerHTML ='selected' + tdhtml
  
}

<table>
  <tbody>
    <tr>
     <td> 1<!--to be selected-->
      <div>
       <div>
        <table>
         <tbody>
          <tr>
           <td></td>
          </tr>
         </tbody>
        </table> 
       </div>
      </div>
     </td>
   </tr>
   <tr>
     <td> 2<!--to be selected-->
      <div>
       <div>
        <table>
         <tbody>
          <tr>
           <td></td>
          </tr>
         </tbody>
        </table> 
       </div>
      </div>
     </td>
   </tr>
   <tr>
     <td> 3 <!-- to be selected-->
      <div>
       <div>
        <table>
         <tbody>
          <tr>
           <td></td>
          </tr>
         </tbody>
        </table> 
       </div>
      </div>
     </td>
   </tr>
  </tbody>
</table>

Cannot use javascript. I'm using SAP Lumira, so only custom CSS files are allowed. — Jack, Feb 16 '21 at 00:58
Javascript is overkill for this, plus you end up with the dreaded "browser flash" as the javascript kicks in and sets the styles — KaraokeStu, Feb 16 '21 at 13:59

score 0 · Answer 2 · answered Feb 16 '21 at 00:47

0

As suggested before (and in my opinion the best option), you can add a class to the td elements you want to select, you can also select them using specificity by using the path to those elements.

CSS    
table tbody tr td{
    /* your code here */
}

answered Feb 16 '21 at 00:47

Hugo Coutinho

11
3

1

On a second thought, this may not be the best option, since this element's children will inherit the style. maybe using javascript. – Hugo Coutinho Feb 16 '21 at 00:51

score 0 · Accepted Answer · answered Feb 16 '21 at 01:18

0

Use td to set styles to all td elements and use td td to reset the styles to the nested td elements.

td {
  // styles
}

td td {
  // styles to reset the nested elements
}

answered Feb 16 '21 at 01:18

Gellio Gao

835
6
19

This would colour all adjacent TD cells too, if the system were to generate any – KaraokeStu Feb 16 '21 at 13:57
@KaraokeStu Why that would be a problem? – Gellio Gao Feb 16 '21 at 20:40
It wouldn't be a problem necessarily, unless he didn't want subsequent TDs to be coloured – KaraokeStu Mar 08 '21 at 17:01

score 0 · Answer 4 · answered Feb 16 '21 at 13:56

You would need to apply a CSS class to the first TD of each row in the highest level table, as follows:

/* Set all root TR's and the first TD element */
table>tbody>tr>td:first-child {
  background-color: yellow;
}

/* Reset so that this doesn't cascade */
table>tbody>tr>td:first-child td {
  background-color: inherit;
}

Example here: https://jsfiddle.net/0utqvhy6/

How to select first td of first two rows using css

4 Answers4