Why does :nth-child not work as expected with a table having a caption?

Question

tr:nth-child does not select the expected row when the table it applies to has a caption.

When a section has a h2 and several p as children, p:nth-child(2) selects the first p after the h2, which is what is expected. However, when using tr:nth-child(2) on a table with several rows and a caption that naturally follows the opening table tag, the selector target the second tr, as if the caption did not exist.

tr:nth-child(2) {
  background-color: red;
}

p:nth-child(2) {
  background-color: red;
}

<table>
  <caption>This caption is the table's first child</caption>
  <tr>
    <th>First row</th>
    <td>1.2</td>
    <td>1.3</td>
    <td>1.4</td>
  </tr>
  <tr>
    <th>Second row</th>
    <td>2.2</td>
    <td>2.3</td>
    <td>2.4</td>
  </tr>
  <tr>
    <th>Third row</th>
    <td>3.2</td>
    <td>3.3</td>
    <td>3.4</td>
  </tr>
</table>

<section>
  <h1>Title (h1)</h1>
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <p>Third paragraph</p>
</section>

I expect the tr:nth-child(2) to select the first row since the 1st child of the table is the caption.

Answer 1

tr elements cannot be child elements of a table

They must be child elements of a tbody, thead, or tfoot element.

tbody elements have optional start and end tags and are inserted implicitly if the author does not insert them explicitly.

The first tr is the first child of the tbody element, and is not a child of the table element at all.