Seletor filho vs. seletor descendente em estruturas de tabela

Ao selecionar elementos em documentos HTML, os desenvolvedores costumam usar seletores filhos (>) para direcionar direcionar seletores filhos e descendentes para direcionar qualquer elemento aninhado. No entanto, há cenários em que o seletor filho parece falhar inesperadamente.

Considere o seguinte exemplo:

table tr td {
  background-color: red;
}

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

A primeira regra seleciona com sucesso todos os elementos

dentro dos elementos dentro dos elementos . No entanto, a segunda regra, que usa o seletor filho (>), falha ao estilizar qualquer elemento , que por sua vez é filho de

. Intrigados com esse comportamento, os desenvolvedores podem presumir que, como	é filho de

, o seletor filho deve ser aplicado.

A confusão surge da inclusão implícita de um elemento

em HTML. Por padrão, os navegadores inserem um elemento para conter elementos . Como resultado, a estrutura real do elemento se torna:

Nesta estrutura modificada,

não é mais filho direto de , mas sim filho de , que por sua vez é filho de . Portanto, o seletor > não pode ter como alvo .

Para corrigir esse problema, os desenvolvedores devem selecionar o elemento tbody explicitamente:

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

Isso garante que o seletor filho tenha como alvo o elemento correto na estrutura modificada. Além disso, se um elemento tbody for explicitamente adicionado ao documento HTML, o mesmo seletor poderá ser usado.

, pois não é um filho imediato de