How Can We Group Descendants in CSS Selectors?

Grouping Descendants in CSS Selectors

Despite the common need to style groups of descendants, CSS lacks a straightforward approach for this task. Consider a simple HTML table:

`

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

.
.
.

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

`

Traditionally, styling all column headings and cells requires the verbose selector:

#myTable th, #myTable td {}

Why can't we use a syntax like this instead:

#myTable (th,td) {}

Proposed Solutions

Until recently, there was no standard solution for grouping descendants in CSS selectors. However, the following pseudo-classes have been proposed:

• :-moz-any(): Introduced by Mozilla in 2010.
• :-webkit-any(): Suggested for WebKit browser but not widely adopted.

However, using these prefixed selectors requires duplicating rulesets and is not recommended for public-facing code.

Future Developments

The Selectors level 4 working draft proposes the :matches() pseudo-class, based on the original :any() proposal. This new pseudo-class may offer enhancements in future revisions.

Workarounds

For the specific case of styling both th and td elements, the * selector can be used:

#myTable tr > * {}

This assumes that tr elements only contain cell elements. For performance-conscious developers, however, this is still not as efficient as the verbose method.

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