Le sélecteur CSS insaisissable pour le regroupement des descendants

Bien que CSS fournisse des options puissantes pour le style des éléments, une absence notable est la possibilité de regrouper facilement les descendants. . Cette limitation devient apparente lors du style d'éléments complexes tels que les tableaux HTML, où l'attribution du même style aux en-têtes de colonnes et aux cellules nécessite des sélecteurs encombrants.

Le dilemme du style descendant

Prenons l'exemple de tableau suivant :

  ...
  

Pour styliser à la fois les en-têtes et les cellules avec un seul sélecteur, on utilise généralement :

#myTable th, #myTable td {}

Cependant, cette approche est verbeuse et fastidieuse lorsqu'il s'agit de traiter un grand nombre d'éléments.

Le sélecteur (th, td) : une opportunité manquée

Une approche plus intuitive La syntaxe serait d'utiliser un sélecteur de regroupement similaire à :

#myTable (th, td) {}

Malheureusement, une telle syntaxe n'existe pas en CSS.

La futilité des propositions antérieures à 2008

Il s'avère que l'absence d'un sélecteur de regroupement descendant est un problème de longue date. Les premières tentatives pour en introduire une, comme la pseudo-classe :any() proposée en 2008, n'ont pas gagné du terrain.

Développements récents et une lueur d'espoir

Cependant, la version de travail des sélecteurs niveau 4 réintroduit le concept de pseudo-classe de regroupement, :matches(). Bien que cette proposition soit prometteuse, la prise en charge des navigateurs est encore loin.

Solutions alternatives

En attendant, il existe quelques solutions de contournement pour le regroupement des descendants :

• À l'aide du sélecteur * :

  #myTable tr > * {}

  (Notez que cela suppose que les éléments tr ne contiennent que des éléments td ou th et pas d'autres éléments)

• S'en tenir à l'approche verbeuse th, td pour des performances maximales

Conclusion

L'absence d'un le sélecteur de regroupement descendant en CSS est un problème persistant depuis de nombreuses années. Bien que les propositions récentes offrent une lueur d'espoir, la prise en charge généralisée des navigateurs reste insaisissable. D'ici là, les développeurs doivent s'appuyer sur des approches alternatives ou se résigner à la verbosité du sélecteur th, td existant.