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;
}

score 799 · Accepted Answer · edited Apr 20 '20 at 18:21

799

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 '20 at 18:21

johannchopin

13,720
10
55
101

answered Feb 05 '11 at 22:21

anroesti

11,053
3
22
33

1

it works, but now it overrides all other classes even if they have a higher priority.. (they are placed later in the css file) – clarkk Feb 05 '11 at 22:33
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 Feb 05 '11 at 22:39
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 Feb 05 '11 at 22:46
I don't think I get it :) could you please do a better example? – clarkk Feb 05 '11 at 22:49
2

Okay, very basic example: `p.xy` is more important than `p`, because it is kind of more specific. http://jsfiddle.net/ftJVX/ – anroesti Feb 05 '11 at 22:55
2

what if I want all child that had a specific class? – MEM May 07 '14 at 15:13
How to use hover state for these elements 'div.dropdown *:hover' does not work – Jithin Jose Sep 22 '14 at 05:36
@MEM try this: p .childWithClass. Jithin Jose are all * selector elements the same elements? if so, try div.dropdown element:hover. see http://allcssselectors.com – user3339411 Feb 17 '15 at 22:11
I think with a good CSS structure inheritance should do the work in itself. – Webwoman Aug 12 '19 at 17:44

score 214 · Answer 2 · edited Feb 02 '22 at 09:50

214

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 02 '22 at 09:50

Manu Artero

9,238
6
58
73

answered Mar 29 '13 at 16:06

Abdennour TOUMI

87,526
38
249
254

score 0 · Answer 3 · answered Jan 27 '23 at 20:16

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>

Select all child elements recursively in CSS

3 Answers3

Linked

Related