Comment pouvons-nous regrouper les descendants dans les sélecteurs CSS ?

Regroupement des descendants dans les sélecteurs CSS

Malgré le besoin courant de styliser les groupes de descendants, CSS ne dispose pas d'une approche simple pour cette tâche. Considérons un simple tableau HTML :

`

<th></th>
<th></th>
<th></th>

.
.
.

<td></td>
<td></td>
<td></td>

`

Traditionnellement, styliser tous les en-têtes de colonnes et toutes les cellules nécessite le sélecteur détaillé :

#myTable th, #myTable td {}

Pourquoi ne pouvons-nous pas utiliser une syntaxe comme celle-ci à la place :

#myTable (th,td ) {}

Solutions proposées

Jusqu'à récemment, il n'existait pas de solution standard pour regrouper les descendants dans les sélecteurs CSS. Cependant, les pseudo-classes suivantes ont été proposées :

• :-moz-any() : Introduite par Mozilla en 2010.
•  : -webkit-any() : suggéré pour le navigateur WebKit mais pas largement adopté.

Cependant, l'utilisation de ces sélecteurs préfixés nécessite la duplication d'ensembles de règles et n'est pas recommandée pour le code destiné au public.

Développements futurs

Le brouillon de travail de niveau 4 des sélecteurs propose la pseudo-classe :matches(), basée sur la proposition originale :any(). Cette nouvelle pseudo-classe pourrait offrir des améliorations dans les révisions futures.

Solutions de contournement

Pour le cas spécifique du style des éléments th et td, le sélecteur * peut être utilisé :

#maTable tr> * {}

Cela suppose que les éléments tr ne contiennent que des éléments de cellule. Cependant, pour les développeurs soucieux des performances, cette méthode n'est toujours pas aussi efficace que la méthode verbeuse.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!