Selector secundario versus selector descendiente en estructuras de tablas

Al seleccionar elementos en documentos HTML, los desarrolladores suelen utilizar selectores secundarios (>) para apuntar Dirige a los selectores secundarios y descendientes para que apunten a cualquier elemento anidado. Sin embargo, hay escenarios en los que el selector secundario parece fallar inesperadamente.

Considere el siguiente ejemplo:

table tr td {
  background-color: red;
}

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

La primera regla selecciona con éxito todos los elementos

dentro de los elementos dentro de los elementos . Sin embargo, la segunda regla, que utiliza el selector secundario (>), no aplica estilo a ningún elemento , que a su vez es hijo de

. Desconcertados por este comportamiento, los desarrolladores podrían suponer que, dado que	es un elemento secundario de

, se debe aplicar el selector de hijos.

La confusión surge de la inclusión implícita de un elemento

en HTML. De forma predeterminada, los navegadores insertan un elemento para contener elementos . Como resultado, la estructura del elemento real se convierte en:

En esta estructura modificada,

ya no es un hijo directo de , sino más bien un hijo de , que a su vez es hijo de . Por lo tanto, el selector > no puede apuntar a .

Para corregir este problema, los desarrolladores deben seleccionar el elemento tbody explícitamente:

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

Esto garantiza que el selector secundario apunte al elemento correcto en la estructura modificada. Además, si se agrega explícitamente un elemento tbody al documento HTML, se puede usar el mismo selector.

ya que no es un hijo inmediato de