Comment pouvons-nous regrouper les éléments descendants en CSS ?

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 :

<code class="html"><table id='myTable'>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  ...
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table></code>

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

<code class="css">#myTable th, #myTable td {}</code>

Cependant, cette approche est verbeuse et fastidieuse lorsque traitant d'un grand nombre d'éléments.

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

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

<code class="css">#myTable (th, td) {}</code>

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

La futilité des propositions antérieures à 2008

En fin de compte , l'absence d'un sélecteur de regroupement de descendants 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 :

• Utilisation du sélecteur * :

  <code class="css">#myTable tr > * {}</code>

  Copier après la connexion

  (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 sélecteur de regroupement descendant en CSS est un problème persistant depuis de nombreuses années . Même si 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.

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!