¿Por qué no puedes agrupar descendientes en un selector de CSS?

Si desea asignar el mismo estilo a un grupo de descendientes, ¿por qué no hay una manera fácil de hacerlo con CSS?

Supongamos que tiene una tabla HTML de la siguiente manera:

 . . . 

¿Por qué tiene que aplicar estilo a todos los encabezados y celdas de columna con el siguiente selector?

 #myTable th, #myTable td {} 

¿Por qué no hay una syntax similar a la siguiente?

 #myTable (th,td) {} 

¿Por qué no hay una syntax similar a la siguiente?

 #myTable (th,td) {} 

Simplemente porque nadie se molestó en proponer una syntax útil … hasta hace poco (en relación con el momento en que publicaste esto de todos modos) como 2008, como una :any() . Esto fue discutido con mayor profundidad un poco más tarde .

La primera implementación surgió de Mozilla, aunque tan tarde como 2010, bajo la apariencia de :-moz-any() :

 #myTable :-moz-any(th, td) {} 

Al año siguiente, se sugiere que WebKit :-webkit-any() mismo , con :-webkit-any() :

 #myTable :-webkit-any(th, td) {} 

Pero si tratara de usar ambos prefijos juntos en este momento, entonces, debido a las reglas de análisis del selector , tendría que duplicar los conjuntos de reglas , haciendo que su código sea aún más largo y derrotando el propósito previsto de la pseudo-clase:

 #myTable :-moz-any(th, td) {} #myTable :-webkit-any(th, td) {} 

Lo que hace que usar los selectores prefijados en el código de cara al público sea casi inútil. No puedo ver ningún uso legítimo para ellos en ningún otro lugar que no sea el código específico del proveedor, lo que significa que probablemente no los utilizará en conjunto, en la misma hoja de estilo.

El nuevo borrador de trabajo del nivel 4 de Selectores tiene una propuesta para una :matches() , que se basa en la propuesta original :any() pero puede ver ciertas mejoras a medida que se revisa el borrador:

 #myTable :matches(th, td) {} 

Por supuesto, dado que es un borrador nuevo, no espere soporte del navegador hasta mucho más tarde.

En el caso muy específico de diseñar los elementos th y td , puede usar * lugar de asumir que ninguno de los elementos tr de esta tabla contendrá elementos secundarios distintos de los elementos de la celda, como el script o la template :

 #myTable tr > * {} 

Pero si eres un adicto al rendimiento y odias al * selector, tendrás que seguir haciéndolo en el largo camino.

Puede agrupar selectores utilizando el proveedor específico -moz-any() y -webkit-any() .

Consulte la referencia de MDN al respecto y la recomendación W3C sobre el pseudo-atributo :matches() .

¡Aclamaciones!

Es posible que desee buscar en SASS – http://sass-lang.com

Le permite escribir CSS de una manera más sensata (similar a lo que sugirió), pero todavía se comstack en CSS simple.

Por ejemplo:

 #myTable{ background: #CCC; tr{ border: 1px solid #EEE; } td{ background: blue; } } 

En lugar de abordarlo con el W3C, podrías usar jQuery para un tipo similar de cosas

 $('#myTable').find('tr, td'); 

Por supuesto, JS no siempre está habilitado y no sería una buena idea confiar en esto. ¡Tendrás que enumerar todos tus selectores!