O Elusive CSS Selector para agrupamento de descendentes

Embora o CSS forneça opções poderosas para estilizar elementos, uma ausência notável é a capacidade de agrupar descendentes facilmente . Essa limitação se torna aparente ao estilizar elementos complexos como tabelas HTML, onde atribuir o mesmo estilo aos títulos das colunas e às células requer seletores complicados.

O dilema do estilo descendente

Considere o seguinte exemplo de tabela:

  ...
  

Para estilizar os títulos e as células com um único seletor, normalmente usar-se-ia:

#myTable th, #myTable td {}

No entanto, essa abordagem é detalhada e tediosa ao lidar com um grande número de elementos.

O seletor (th, td): uma oportunidade perdida

Um mais intuitivo sintaxe seria usar um seletor de agrupamento semelhante a:

#myTable (th, td) {}

Infelizmente, essa sintaxe não existe em CSS.

A futilidade das propostas anteriores a 2008

Acontece que a falta de um seletor de agrupamento descendente tem sido um problema de longa data. As primeiras tentativas de introduzir uma, como a pseudoclasse :any() proposta em 2008, não ganharam força. No entanto, o rascunho de trabalho dos Seletores de nível 4 reintroduz o conceito de uma pseudoclasse de agrupamento, :matches(). Embora esta proposta seja promissora, o suporte ao navegador ainda está muito distante.

Soluções alternativas

Enquanto isso, existem algumas soluções alternativas para o agrupamento descendente:

Usando o seletor *:

• (Observe que isso pressupõe que os elementos tr contêm apenas elementos td ou th e não outros elementos)

  #myTable tr > * {}

  Conclusão
• A falta de um O seletor de agrupamento descendente em CSS tem sido um problema persistente por muitos anos. Embora as propostas recentes ofereçam um vislumbre de esperança, o suporte generalizado aos navegadores permanece indefinido. Até então, os desenvolvedores devem confiar em abordagens alternativas ou resignar-se à verbosidade do seletor th, td existente.