Селектор дочерних элементов и селектор потомков в структурах таблиц

При выборе элементов в HTML-документах разработчики часто используют дочерние селекторы (>) для выбора направляйте дочерние элементы и селекторы потомков для выбора любого вложенного элемента. Однако существуют сценарии, в которых дочерний селектор неожиданно дает сбой.

Рассмотрим следующий пример:

table tr td {
  background-color: red;
}

table > tr > td {
  background-color: blue;
}

Первое правило успешно выбирает все элементы

внутри элементов внутри элементов . Однако второе правило, использующее дочерний селектор (>), не позволяет стилизовать элементы , который, в свою очередь, является дочерним элементом

. Озадаченные таким поведением, разработчики могут предположить, что, поскольку	является дочерним элементом

, должен применяться дочерний селектор.

Путаница возникает из-за неявного включения элемента

в HTML. По умолчанию браузеры вставляют элемент , содержащий элементы . В результате фактическая структура элемента становится следующей:

В этой измененной структуре

больше не является прямым дочерним элементом , а скорее дочерним элементом , который сам является дочерним элементом . Следовательно, селектор > не может нацеливаться на .

Чтобы исправить эту проблему, разработчики должны явно выбрать элемент tbody:

table > tbody > tr > td {
  background-color: blue;
}

Это гарантирует, что дочерний селектор нацелен на правильный элемент в измененной структуре. Кроме того, если элемент tbody явно добавлен в HTML-документ, можно использовать тот же селектор.

, поскольку он не является непосредственным дочерним элементом