How Can We Group Descendant Elements in CSS?

The Elusive CSS Selector for Descendant Grouping

While CSS provides powerful options for styling elements, one notable absence is the ability to easily group descendants. This limitation becomes apparent when styling complex elements like HTML tables, where assigning the same style to both column headings and cells requires cumbersome selectors.

The Dilemma of Descendant Styling

Consider the following table example:

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

To style both the headings and cells with a single selector, one would typically use:

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

However, this approach is verbose and tedious when dealing with a large number of elements.

The (th, td) Selector: A Missed Opportunity

A more intuitive syntax would be to use a grouping selector similar to:

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

Unfortunately, such syntax doesn't exist in CSS.

The Futility of Pre-2008 Proposals

As it turns out, the lack of a descendant grouping selector has been a longtime issue. Early attempts to introduce one, such as the :any() pseudo-class proposed in 2008, did not gain traction.

Recent Developments and a Glimmer of Hope

However, the Selectors level 4 working draft reintroduces the concept of a grouping pseudo-class, :matches(). While this proposal shows promise, browser support is still a long way off.

Alternative Solutions

In the meantime, there are some workarounds for descendant grouping:

• Using the * selector:

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

  (Note that this assumes tr elements only contain td or th elements and not other elements)

• Sticking with the verbose th, td approach for maximum performance

Conclusion

The lack of a descendant grouping selector in CSS has been a persistent issue for many years. While recent proposals offer a glimmer of hope, widespread browser support remains elusive. Until then, developers must rely on alternative approaches or resign themselves to the verbosity of the existing th, td selector.

The above is the detailed content of How Can We Group Descendant Elements in CSS?. For more information, please follow other related articles on the PHP Chinese website!