Why Doesn\'t CSS Have Descendant Grouping Functionality?

Why CSS Selectors Lack Descendant Grouping Functionality

In CSS, assigning styles to a group of nested elements can be cumbersome. Consider an HTML table where you want to style all column headings and cells. You must use the following selector:

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

It would seem logical to have a syntax like:

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

Historical Context

However, such syntax does not exist because no proposal for it was made until 2008, in the form of the :any() pseudo-class.

Early Browser Implementations

Mozilla first implemented it as :-moz-any() in 2010:

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

WebKit proposed a similar approach with :-webkit-any():

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

However, using both prefixes required duplicating the rulesets, making the code redundant.

Modern Proposals

The Selectors level 4 draft introduces :matches():

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

This proposal is still under development, limiting browser support.

Workaround for Table Styling

For tables, you can use the universal selector * to target both th and td elements:

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

For improved performance, you may still prefer the longer form.

The above is the detailed content of Why Doesn\'t CSS Have Descendant Grouping Functionality?. For more information, please follow other related articles on the PHP Chinese website!