Select all child elements recursively in CSS

Question

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.dropdown > *, 
div.dropdown > * > *, 
div.dropdown > * > * > *, 
div.dropdown > * > * > * > * {
    color: red;
}

johannchopin · Accepted Answer · 2020-04-20 18:21:21Z

819

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

edited Apr 20, 2020 at 18:21

johannchopin

15k11 gold badges64 silver badges125 bronze badges

answered Feb 5, 2011 at 22:21

anroesti

11.5k3 gold badges24 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

clarkk Over a year ago

it works, but now it overrides all other classes even if they have a higher priority.. (they are placed later in the css file)

anroesti Over a year ago

The selector also plays a role in what priority the properties have, not just where in the file they appear. You could try adding ` !important` to your values, e.g. color: red !important;

anroesti Over a year ago

I know, it's a bit ugly. You could instead try writing more precise selectors, chances are, this would work too. (e.g. #head ul → #head ul#navi)

anroesti Over a year ago

Okay, very basic example: p.xy is more important than p, because it is kind of more specific. jsfiddle.net/ftJVX

MEM Over a year ago

what if I want all child that had a specific class?

|

Manu Artero · Accepted Answer · 2022-02-02 09:50:12Z

222

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 > *

edited Feb 2, 2022 at 9:50

Manu Artero

10.4k8 gold badges69 silver badges78 bronze badges

answered Mar 29, 2013 at 16:06

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

Comments

Ronnie Smith · Accepted Answer · 2023-01-27 20:16:19Z

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>

Collectives™ on Stack Overflow

Select all child elements recursively in CSS

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related