CSS select multiple descendants of another element

by

Is it possible to select multiple elements that have an ancestor of a certain class, id, etc in CSS?

This is now possible with the :is() pseudo-class, originating as :matches() mentioned in the original version of this answer below. Be sure not to get it mixed up with :where(), which removes specificity that’s otherwise critical to your selector:

table.exams :is(caption, tbody, tfoot, thead, tr, th, td)

Prior to :is(), this was not possible without duplicating the entire ancestor selector and specifying all of the descendants1:

table.exams caption, 
table.exams tbody, 
table.exams tfoot, 
table.exams thead, 
table.exams tr, 
table.exams th, 
table.exams td

It was only until late after Selectors 3 was being finalized that they proposed a pseudo-class notation to do this, and it was only recently that basic implementations have started showing up. See this answer for a little history lesson.

In short, the pseudo-class that’s now entered the standard is known as :matches(). In the distant future, once browsers start implementing :matches(), you will be able to do something like this:

table.exams :matches(caption, tbody, tfoot, thead, tr, th, td)

1 Specifically with tables, you can get away with table.exams > :not(colgroup), table.exams > * > tr > *, but as you can tell this is incredibly cryptic (not to mention it assumes you have no script-supporting elements or nested tables within this table) and you’re better off just listing all the descendants you want explicitly.

More Related Contents:

  1. Is there a CSS selector for elements containing certain text?
  2. What does the “~” (tilde/squiggle/twiddle) CSS selector mean?
  3. css3 nth of type restricted to class [duplicate]
  4. ::slotted CSS selector for nested children in shadowDOM slot
  5. nth-child doesn’t respond to class [duplicate]
  6. Select elements by attribute in CSS
  7. Nesting CSS classes
  8. CSS attribute selectors: The rules on quotes (“, ‘ or none?)
  9. Is the CSS :not() selector supposed to work with distant descendants?
  10. What is the difference between ‘>’ and a space in CSS selectors?
  11. Combining :last-child with :not(.class) selector in CSS
  12. Why can’t you group descendants in a CSS selector?
  13. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  14. Not CSS selectors
  15. What is this CSS selector? [class*=”span”]
  16. Is there any pros and cons if i use always CSS Class instead CSS ID for everything?
  17. Is there such a thing as an “all inclusive sibling” CSS selector?
  18. CSS selector involving pseudo class first-child and dropcap
  19. Targeting position:sticky elements that are currently in a ‘stuck’ state
  20. Select odd even child excluding the hidden child
  21. Is there an opposite CSS pseudo-class to :hover?
  22. Select all ‘tr’ except the first one
  23. What are the rules around whitespace in attribute selectors?
  24. CSS – First child without certain class
  25. CSS select first element with a certain class
  26. Correct terms and words for sections and parts of selectors
  27. How to skip first child?
  28. How to select all elements whose ID starts and ends with specific strings?
  29. selector for nth nested elements
  30. Latest on CSS parent selector [duplicate]

Leave a Comment