title: Select all td in tr in nested table with css selector
body: <p>I want to select all td inside the first tr of the tbody. I would normally do this like: tbody:first-child td --> but this gives me the result you can see on the image, the yellow is the result.</p>
  
  <p><img src="https://i.stack.imgur.com/StdkW.png" alt="enter image description here"></p>
  
  <h2>My html - short version</h2>
  
  <p>I know there are unclosed tags but i copied this from my debugger because everything is generated by jquery. Any ideas?</p>
  
  <pre><code>   &lt;table class="wc-header"&gt;
      &lt;thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td rowspan="3"&gt;Medewerker 1&lt;/td&gt;
                  &lt;td class="row_header"&gt;Van&lt;/td&gt;
                  &lt;td class="hours" data-person="1" data-day="1" data-row="from"&gt;
                  &lt;input class="past selected" type="text" readonly="readonly"&gt;
                  &lt;/td&gt;
                  &lt;td class="hours" data-person="1" data-day="2" data-row="from"&gt;
                  &lt;td class="hours" data-person="1" data-day="3" data-row="from"&gt;
                  &lt;td class="hours" data-person="1" data-day="4" data-row="from"&gt;
                  &lt;td class="hours" data-person="1" data-day="5" data-row="from"&gt;
                  &lt;td class="hours specialday" data-person="1" data-day="6" data-row="from"&gt;
                  &lt;td class="hours specialday" data-person="1" data-day="7" data-row="from"&gt;
                  &lt;td class="hours" data-person="1" data-day="8" data-row="from"&gt;
                  &lt;td class="hours wc-today" data-person="1" data-day="9" data-row="from"&gt;
                  &lt;td class="hours" data-person="1" data-day="10" data-row="from"&gt;
                  &lt;td class="hours" data-person="1" data-day="11" data-row="from"&gt;
                  &lt;td class="hours" data-person="1" data-day="12" data-row="from"&gt;
                  &lt;td class="hours specialday" data-person="1" data-day="13" data-row="from"&gt;
                  &lt;td class="hours specialday" data-person="1" data-day="14" data-row="from"&gt;
                  &lt;td class="hours" data-person="1" data-day="15" data-row="from"&gt;
                  &lt;td class="hours" data-person="1" data-day="16" data-row="from"&gt;
                  &lt;td class="hours" data-person="1" data-day="17" data-row="from"&gt;
                  &lt;td class="hours" data-person="1" data-day="18" data-row="from"&gt;
                  &lt;td class="hours" data-person="1" data-day="19" data-row="from"&gt;
                  &lt;td class="hours specialday" data-person="1" data-day="20" data-row="from"&gt;
                  &lt;td class="hours specialday" data-person="1" data-day="21" data-row="from"&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="row_header"&gt;Tot&lt;/td&gt;
                  &lt;td class="hours" data-person="1" data-day="1" data-row="till"&gt;
                  &lt;td class="hours" data-person="1" data-day="2" data-row="till"&gt;
                  &lt;td class="hours" data-person="1" data-day="3" data-row="till"&gt;
                  &lt;td class="hours" data-person="1" data-day="4" data-row="till"&gt;
                  &lt;td class="hours" data-person="1" data-day="5" data-row="till"&gt;
                  &lt;td class="hours specialday" data-person="1" data-day="6" data-row="till"&gt;
                  &lt;td class="hours specialday" data-person="1" data-day="7" data-row="till"&gt;
                  &lt;td class="hours" data-person="1" data-day="8" data-row="till"&gt;
                  &lt;td class="hours wc-today" data-person="1" data-day="9" data-row="till"&gt;
                  &lt;td class="hours" data-person="1" data-day="10" data-row="till"&gt;
                  &lt;td class="hours" data-person="1" data-day="11" data-row="till"&gt;
                  &lt;td class="hours" data-person="1" data-day="12" data-row="till"&gt;
                  &lt;td class="hours specialday" data-person="1" data-day="13" data-row="till"&gt;
                  &lt;td class="hours specialday" data-person="1" data-day="14" data-row="till"&gt;
                  &lt;td class="hours" data-person="1" data-day="15" data-row="till"&gt;
                  &lt;td class="hours" data-person="1" data-day="16" data-row="till"&gt;
                  &lt;td class="hours" data-person="1" data-day="17" data-row="till"&gt;
                  &lt;td class="hours" data-person="1" data-day="18" data-row="till"&gt;
                  &lt;td class="hours" data-person="1" data-day="19" data-row="till"&gt;
                  &lt;td class="hours specialday" data-person="1" data-day="20" data-row="till"&gt;
                  &lt;td class="hours specialday" data-person="1" data-day="21" data-row="till"&gt;
              &lt;/tr&gt;
          &lt;tr&gt;
          &lt;/tbody&gt;
      &lt;tbody&gt;
      &lt;tbody&gt;
      &lt;tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <h2>EDIT</h2>
  
  <p>Maybe I should explain what i'm actually trying to do.  The black line you see on the left is a border given to the TBODY. I want this line having the width of the table, but the border gets overriden by the border of the td's. Maybe any other solutions?</p>
  
  <h2>CSS</h2>
  
  <pre><code>[data-person] {
      border:1px solid #DEDEDE;
  }
  
  
  tbody tr:first-child td {
      background-color:yellow;
  }
  </code></pre>
  
  <h2>Solved</h2>
  
  <p>I had an override problem with the td's. Realized this after I posted my question, thx for help</p>
  
  <p>Thanks in advance</p>