El esquivo selector de CSS para agrupación de descendientes

Si bien CSS proporciona opciones poderosas para diseñar elementos, una ausencia notable es la capacidad de agrupar fácilmente a descendientes . Esta limitación se hace evidente al diseñar elementos complejos como tablas HTML, donde asignar el mismo estilo tanto a los encabezados de las columnas como a las celdas requiere selectores engorrosos.

El dilema del estilo descendiente

Considere el siguiente ejemplo de tabla:

  ...
  

Para diseñar tanto los encabezados como las celdas con un solo selector, normalmente se usaría:

#myTable th, #myTable td {}

Sin embargo, este enfoque es detallado y tedioso cuando se trata de una gran cantidad de elementos.

El selector (th, td): un error Oportunidad

Una sintaxis más intuitiva sería utilizar un selector de agrupación similar a:

#myTable (th, td) {}

Desafortunadamente, dicha sintaxis no existe en CSS.

La inutilidad de antes de 2008 Propuestas

Resulta que la falta de un selector de agrupación descendiente ha sido un problema desde hace mucho tiempo. Los primeros intentos de introducir una, como la pseudoclase :any() propuesta en 2008, no tuvieron éxito.

Desarrollos recientes y un rayo de esperanza

Sin embargo, el borrador de trabajo de Selectores de nivel 4 reintroduce el concepto de pseudoclase de agrupación, :matches(). Si bien esta propuesta es prometedora, la compatibilidad con el navegador aún está muy lejos.

Soluciones alternativas

Mientras tanto, existen algunas soluciones para la agrupación de descendientes:

• Usando el selector *:

  #myTable tr > * {}

  (Tenga en cuenta que esto supone que los elementos tr solo contienen elementos td o th y no otros elementos)

• Seguir con el enfoque detallado th, td para obtener el máximo rendimiento

Conclusión

La falta de un selector de agrupación descendiente en CSS ha sido un problema persistente durante muchos años. Si bien las propuestas recientes ofrecen un rayo de esperanza, el soporte generalizado de los navegadores sigue siendo difícil de alcanzar. Hasta entonces, los desarrolladores deben confiar en enfoques alternativos o resignarse a la verbosidad del selector th, td existente.