2

What is the easiest way to select all child elements of a flexbox container and give them all the same margin for example?

Example:

<div class="flexboxcontainer">
<h1>Headline</h1>
<p>Some Text</p>
<div>Some more text</div>
<p class="smalltext">Some small text</p>
</div>
2
  • 1
    .flexboxcontainer > * Commented Dec 18, 2017 at 11:46
  • .flexboxcontainer * use this CSS inner all element select and .flexboxcontainer > * select for instaed child. Commented Dec 18, 2017 at 11:48

3 Answers 3

6

To select the direct children (level 1 children of the flex container):

.flexboxcontainer {
  display: flex;
}

.flexboxcontainer>* {
  /*Select only 1 level children */
  padding: 20px;
  border: 2px solid black;
}
<div class="flexboxcontainer">
  <h1>Headline</h1>
  <p>Some Text</p>
  <div>Some more text
    <h3>Random stuff</h3>
  </div>
  <p class="smalltext">Some small text
    <span>Additional text</span>
  </p>
</div>

To select all children i.e descendants (all level children of the flex container):

.flexboxcontainer {
  display: flex;
}

.flexboxcontainer * {
  /*Select all level children */
  padding: 20px;
  border: 2px solid black;
}
<div class="flexboxcontainer">
  <h1>Headline</h1>
  <p>Some Text</p>
  <div>Some more text
    <h3>Random stuff</h3>
  </div>
  <span class="smalltext">Some text
    <p>More text</p>
  </span>
</div>

1
.flexboxcontainer > * {
    /* You properties */
}

It has nothing to do with flex - you can select all direct children of an element with the selector above.

1

For the direct children that would be .flexboxcontainer > * { ... }, for all children .flexboxcontainer * { ... }

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