Select All Elements in Subtree

Question

How can I make a CSS selector match all elements in the subtree of an element marked with a certain class?

I'm imagining CSS like the following (where the :subtree part is me making something up).

.diagram:subtree
{
    ...
}

When I write HTML like the following, the <div> and every element inside of it should be selected.

<div class="diagram">
    ...
</div>

Answer 1

Simply use the descendant selector (space):

.diagram * { … }

This selects every element beneath any element(s) that have the diagram class applied.

To match both the div itself AND its descendants, use grouping:

.diagram, .diagram * { … }

Quoting the spec:

At times, authors may want selectors to match an element that is the descendant of another element in the document tree (e.g., "Match those EM elements that are contained by an H1 element"). Descendant selectors express such a relationship in a pattern. A descendant selector is made up of two or more selectors separated by white space. A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A.

Answer 2

.diagram, .diagram *

This will select the div .diagram. The space is the descendant selector, and * is all elements.

EDIT: I thought your question originally said "including the element" hence the .diagram,, but you can simply remove that if desired.