How to select all children in css?

Question

Lets say I have a wrapper for some big UI element with class="wrapper".

The HTML would be like:

<div class="wrapper">
   / a lot of other elements
</div>

Now I need to select each of elements and I go like this:

.wrapper > .first_element_class{}
.wrapper > .second_element_class{}
...

Is there a way to select all wrappers children with one line? Something like this:

.wrapper{
   .first_class{}
   ...
}

Answer 1

you can use the universal selector * if you don't know which element/class you will have

Something like this:

.wrapper>* {
  color: red
}

<div class="wrapper">
  <div class="test">this is red</div>
  <span>this is red</span>
  <section>this is red</section>
</div>

Answer 2

You can use white space to match all descendants of an element.

.wrapper * {
  color: black;
}

https://www.w3.org/TR/CSS21/selector.html#descendant-selectors