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
}