Question

<div id="top">
  <table>
    <tbody>
      <tr>
        <td>Cell number one content...</td>
        <td>Cell number two content...</td>
      </tr>
    <tbody>
  </table>
</div>

Presumably, this CSS should select the entire first cell blue and the second red:

  div#top table tbody tr:first-child {
      background-color:blue;
   }
   div#top table tbody tr + tr {
      background-color:red;
   }

Instead, this is what happens:

Answer 1

Not quite. :first-child in your case means “a TR which is the FIRST CHILD of a TBODY”. it doesn’t mean “the first child element of a TR” (the TD).

As such, you’re applying the blue to the table row, not the first td that happens to be a child of tr.

if you want the first td only, then:

div#top .... tr td:first-child { background-color: blue; }