css - :nth-child definition & when it meets tr and caption -

with code below found i'm confused definition of :nth-child

the :nth-child(n) selector matches every element nth child, regardless of type, of parent.

tr:nth-child(2n) {    background-color: gray;  }  table {    margin-left: 20px;    margin-right: 20px;    border-spacing: 0px;    border: thin solid black;    caption-side: bottom;    border-collapse: collapse;  }  td,  th {    border: thin dotted gray;    padding: 5px;  }  caption {    font-style: italic;    padding-top: 8px;  }

<table>    <caption>content</caption>    <tr>      <th>table head</th>    </tr>    <tr>      <td>111111</td>    </tr>    <tr>      <td>222222</td>    </tr>    <tr>      <td>333333</td>    </tr>    <tr>      <td>444444</td>    </tr>    <tr>      <td>555555</td>    </tr>    <tr>      <td>666666</td>    </tr>  </table>

and 111111, 333333, 555555 become gray. nothing changed after delete caption tag, 222222, 4444444, 666666 become gray after removed tr tag of table title. isn't :nth-child suppose count every element of parent?

the problem here html invalid. tr elements must wrapped within either thead, tbody or tfoot element, , browsers automatically fix sticking them in tbody.

your html on these browsers end looking this:

<table>   <caption>...</caption>   <tbody>     <tr>...</tr>     ...   </tbody> </table> 

and thus, deleting <caption> element have no impact on positioning of tr elements.

if inspect <table> element, you'll see: