CSS FLEX BOX Container

HTML-CSS
1

Learning Flexbox from W3schools. I don’t understand this syntax here
.flex-container > div .What does the greater than sign mean here? I thought you can group multiple selectors with a comma?

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Create a Flex Container</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>
1 Like
2

I suggest you find yourself a good CSS reference online so you can quickly lookup the answers to these types of questions. I don’t endorse any in particular but here’s one that came up near the top of my google search.

CSS cheat sheet

3 Likes
3

The greater than symbol applies the rules to all the direct children of the element.

.parent > .child { /* styles here */ }

<div class='parent'> <!-- does not apply to this -->
  <div class='child'></div> <!--applies to this -->
  <div class='child'> <!-- and this -->
    <div class='child-child'></div> <!-- does not apply to this -->
  </div>
</div>
4

Whereas if I used a comma, that applies to all the element, correct?

5

Thank you for the recommendation.

6

A comma would make it a selector list, so for example.

h1,
h2 {
  font-family: sans-serif;
}

But that has nothing to do with selecting child or descendant elements.

What you would normally use if not a child combinator is a descendant combinator. So all descendants and not just direct children.

section h1 {
  margin-bottom: 2rem;
}
1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.