Child Selector vs. Descendant Selector in Table Structures

When selecting elements in HTML documents, developers often use child selectors (>) to target direct children and descendant selectors to target any nested element. However, there are scenarios where the child selector seems to fail unexpectedly.

Consider the following example:

table tr td {
  background-color: red;
}

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

The first rule successfully selects all

elements within elements within elements. However, the second rule, which uses the child selector (>), fails to style any , which in turn is a child of

elements. Puzzled by this behavior, developers might assume that since	is a child of

, the child selector should apply.

The confusion arises from the implicit inclusion of a

element in HTML. By default, browsers insert a element to contain elements. As a result, the actual element structure becomes:

In this modified structure,

is no longer a direct child of , but rather a child of , which itself is a child of . Therefore, the > selector cannot target .

To correct this issue, developers must select the tbody element explicitly:

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

This ensures that the child selector targets the correct element in the modified structure. Additionally, if a tbody element is explicitly added to the HTML document, the same selector can be used.

since it is not an immediate child of