nth-child with colspan in earlier column

by Derk-Jan Hartman

HTML

<table class="col-3-left">
  <colgroup>
    <col style="background-color:red">
    <col style="background-color:yellow">
    <col style="background-color:blue;">
  </colgroup>
  <tr>
    <th>First</th>
    <th>Second</th>
    <th>Third</th>
  </tr>
  <tr>
    <td colspan="2">1</td>
    <td>3</td>
  </tr>
</table>

CSS

th,td {
  min-width: 10em;
}
th {
  text-align: left;
  background-color: purple;
}
td {
  text-align: right;
}

.col-3-left tr td:nth-child(3),
.col-3-left tr th:nth-child(3) {
  text-align: center;
}