Почему в таблице caption убивает colgroup?

Question

[VMesser]

Задача скорее из разряда учебных, потому как решается обычным назначением классов на элементы.
Но вот если обойтись только селекторами тегов, то получается проблема. Ниже работающий код, первая группа окрашивается в жёлтый, вторая в красный (кстати, почему-то не работает last-child).

colgroup:first-child {
  background-color: yellow;
}

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

<table>
		<colgroup>
			<col>
			<col>
		</colgroup>
		<colgroup>
			<col>
		</colgroup>
		
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>2</td>
				<td>2</td>
				<td>2</td>
			</tr>

	</table>

При добавлении

<table> 
    <caption>Заголовок</caption>

Все бэкграунды ломаются.
Наглядный пример:
jsfiddle.net/k9054vjr/17

Почему? Нагуглить ничего не удалось. Синтаксис без закрывающих тегов (на всякий) тоже не прошёл.

Answer 1

[theaweary]

Так работает:

colgroup:first-of-type {
background-color: yellow;
}

colgroup:nth-of-type(2) {
background-color: red;
}