Why can’t you group descendants in a CSS selector?

by

Why isn’t there a syntax similar to the following?

#myTable (th,td) {}

Quite simply because nobody bothered to propose a useful syntax… until as recently (relative to the time you posted this anyway) as 2008, as an :any() pseudo-class. This was discussed in greater depth a little later.

The first implementation surfaced from Mozilla, albeit as late as 2010, in the guise of :-moz-any():

#myTable :-moz-any(th, td) {}

The following year, it would be suggested that WebKit follow suit, with :-webkit-any():

#myTable :-webkit-any(th, td) {}

But if you were to try to use both prefixes together right now, then due to selector parsing rules you would have to duplicate the rulesets, making your code even longer and defeating the intended purpose of the pseudo-class:

#myTable :-moz-any(th, td) {}
#myTable :-webkit-any(th, td) {}

Which makes using the prefixed selectors in public-facing code all but pointless. I can see no legitimate use for them anywhere other than vendor-specific code, which means you probably won’t be using them together, in the same stylesheet.

The new Selectors level 4 working draft has a proposal for a :matches() pseudo-class, which is based on the original :any() proposal but may see certain enhancements as the draft is revised:

#myTable :matches(th, td) {}

Of course, since it’s a new draft, don’t expect browser support until much later.

In the very specific case of styling both th and td elements, you could use * instead assuming that none of the tr elements in this table will ever contain children other than cell elements, such as script or template:

#myTable tr > * {}

But if you’re a performance junkie and hate the * selector, you’ll have to stick with doing it the long way.

More Related Contents:

  1. Is there a CSS parent selector?
  2. What do commas and spaces in multiple classes mean in CSS?
  3. Complex CSS selector for parent of active child [duplicate]
  4. Select every Nth element in CSS
  5. CSS3 selector :first-of-type with class name?
  6. CSS Selector that applies to elements with two classes
  7. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  8. CSS ‘>’ selector; what is it? [duplicate]
  9. CSS selector based on element text? [duplicate]
  10. Should I avoid using !important in CSS?
  11. CSS: How to say .class:last-of-type [classes, not elements!] [duplicate]
  12. Pure CSS checkbox image replacement
  13. Handling a colon in an element ID in a CSS selector [duplicate]
  14. How to write a CSS hack for IE 11? [duplicate]
  15. :not() selector not behaving the same between Safari and Chrome/Firefox
  16. CSS selector for attribute names based on a wildcard
  17. IE8 :nth-child and :before
  18. CSS selector to select first element of a given class
  19. Invalid CSS selector causes rule to be dropped: What is the rationale?
  20. Style child element when hover on parent
  21. Can I use variables for selectors?
  22. Combine :after with :hover
  23. What does the dot mean in CSS?
  24. :active css selector not working for IE8 and IE9
  25. Is there such a thing as an “all inclusive sibling” CSS selector?
  26. CSS selector involving pseudo class first-child and dropcap
  27. Multiple descendant children selector with css [duplicate]
  28. Targeting position:sticky elements that are currently in a ‘stuck’ state
  29. CSS class repetition to increase specificity
  30. select second child

Leave a Comment