css - サブツリー内のすべての要素を選択

Question

特定のクラスでマークされた要素のサブツリー内のすべての要素に CSS セレクターを一致させるにはどうすればよいですか?

以下のようなCSSをイメージしています（:subtree部分は私が何かを作っているところです）。

.diagram:subtree
{
    ...
}

次のように HTML を記述する<div>と、その中のすべての要素が選択されます。

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

Answer 1

子孫セレクター(スペース)を使用するだけです。

.diagram * { … }

diagramこれにより、クラスが適用されている要素の下にあるすべての要素が選択されます。

div 自体とその子孫の両方を一致させるには、groupingを使用します。

.diagram, .diagram * { … }

仕様の引用：

時には、作成者は、セレクターがドキュメント ツリー内の別の要素の子孫である要素に一致することを望む場合があります (たとえば、「H1 要素に含まれる EM 要素に一致する」)。子孫セレクターは、このような関係をパターンで表現します。子孫セレクターは、空白で区切られた 2 つ以上のセレクターで構成されます。"A B" 形式の子孫セレクターは、要素 B が祖先要素 A の任意の子孫である場合に一致します。

Answer 2

.diagram, .diagram *

これにより、 div が選択されます.diagram。スペースは子孫セレクターであり、*すべての要素です。

編集：あなたの質問はもともと「要素を含む」と言っていまし.diagram,たが、必要に応じて単に削除できます。

Answer 3

このコードを使用するだけです.diagram * {}