Question

I have something like this

<table>
  <tr>
    <td>First table</td>
  </tr>
</table>

<table>
  <tr>
    <td>Second table</td>
  </tr>
</table>

And the following CSS

table {
  margin-bottom:40px;
}
table:last-child {
  margin-bottom:0px;
}

But the second table still gets margin-bottom applied. Wat do?

Answer 1

@Quentin is right that your code does not reproduce your described problem.

I’m going to guess what the problem is.

table:last-child does not mean “the last table in the parent element”.

It actually means “the last element in the parent element if it’s a table“.

For example, given this HTML table:last-child will not select anything:

<div>
    <table>
        ..
    </table>

    <table>
        ..
    </table>

    <div>I'm the last child</div>
</div>