css selectors - CSS select multiple descendants of another element

Question

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

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

If not, is there a way to select all descendants of that element?

Answer 1

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 descendants¹:

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)

---

¹ _{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.}