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.dropdown > *,
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 as a descendant of A
A > B
B as a child of A
So
div.dropdown *
and not
div.dropdown > *