html - Why doesn't my first-child selector work on this nested table?

Question

tr:first-child:hover .td-header-title {
    background: orange;
}

<tr>
   <td class="td-header-title">Header title 1
      <tr>
          <td class="td-header-title">Header title 2</td>
      </tr>
   </td>
</tr>

Answer 1

The default background value for all elements is: transparent. As you see in the snippet, the child div background will also be red if you hover the parent element. The child background-color still is transparent and as such the red color will be seen. "It shines through".

div {
  padding: 10px;
  border: 1px solid black;
}

.parent:hover {
  background-color: red;
}

<div  class="parent">Parent
  <div class="child">Child</div>
</div>