13

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{}
   ...
}
1
  • 3
    Your "Something like this" doesn't look like a one-liner to me.
    – BoltClock
    Commented Mar 27, 2017 at 15:17

2 Answers 2

17

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>

1
  • How about all offsprings?
    – Aero Wang
    Commented Jul 31, 2017 at 8:19
6

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

Note, this would select all the children and their grandchildren recursively if that is what you need. Could be quite an expensive operation depending on how much markup elements you nested into .wrapper.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.