What does selector ".grid-containter > div" select in try-it examples under topic "Grid Lines"?

[phunsoft]

Hello

The two try-it examples in topic "Grind Lines" have the following CSS style code:

<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
</style>

 I cannot identify what elements selector ".grid-container > div" will apply to? The greater-than symbol is only listed for HTML elements in the CSS reference. For HTML elements the greater-than symbol defines a parent-child relationship. The <div> elements in the example having class "grid-container" do not have another <div> as parent.

<h1>Grid Lines</h1>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
</div>

<p>You can refer to line numbers when placing grid items.</p>

 

Thanks

Peter

 

[Ingolme]

It selects <div> elements which are immediate children of <div class="grid-container". Which means that it selects <div class="item1">, <div class="item2">, <div class="item3">... etc. because they are the children of <div class="grid-container">

 

[phunsoft]

I see, I mixed parent and child.

At first read, I understood that it selects <div> elements which are children of *any* parent element having class "grid-container". So it would work the same for the following code:

<span class="grid-container">
  <div>...</div>
  <div>...</div>
</span>

But then: You write "... immediate children of <div class="grid-container...". Does the ">" symbol in this case, i.e. parent part is a class, not an element, specifically mean that the parent has to be of same type as the child, <dev> in this case? Or does the ">" symbol create a parent - child relationship between any kind of selectors, parent as well as child?

[Ingolme]

The child selector ">" selects children of anything on the left which match the selector on the right.

I only mentioned <div class="grid-container"> because it was the only element in your example code that matches the selector, but it doesn't mean that it needs to be a div. To be more precise, the previous code would work on <div> elements which are children of any element with class="grid-container"