CSS FLEX BOX Container

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>
.flex-container {
  display: flex;
  background-color: DodgerBlue;

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;

<h1>Create a Flex Container</h1>

<div class="flex-container">

<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>


1 Like

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


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 -->

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

Thank you for the recommendation.

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

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

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