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!

Answer 1

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
}

Answer 2

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>

Answer 3

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 */
}

Answer 4

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/