Select all child elements recursively in CSS

How can you select all child elements recursively?

div.dropdown, div.dropdown > * {
    color: red;
}

This class only throws a class on the defined className and all immediate children. How can you, in a simple way, pick all childNodes like this:

div.dropdown, 
div.dropdo开发者_开发技巧wn > *, 
div.dropdown > * > *, 
div.dropdown > * > * > *, 
div.dropdown > * > * > * > * {
    color: red;
}

Use a white space to match all descendants of an element:

div.dropdown * {
    color: red;
}

x y matches every element y that is inside x, however deeply nested it may be - children, grandchildren and so on.

The asterisk * matches any element.

Official Specification: CSS 2.1: Chapter 5.5: Descendant Selectors

The rule is as following :

A B {
  /* B is descendant of A */
}

A > B {
  /* B is direct child of A */
}

So

div.dropdown *

instead of

div.dropdown > * 

Descendant combinator

The descendant combinator — typically represented by a single space (" ") character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc.) element matching the first selector.

details details {
  margin-left:48px;
}

<details>
  <summary>A</summary>
  A is a letter in the alphabet.
</details>
<details open>
  <summary>B</summary>
  B is a letter in the alphabet.
  <details open>
    <summary>1</summary>
    1 is a number.
    <details open>
      <summary>*</summary>
      * is a character.
    </details>
  </details>
  <details open>
    <summary>2</summary>
    2 is a number.
  </details>
</details>