What does the following syntax mean?

I am not sure what the following syntax means:
“body > div” and “body > div > div” Is this short hand for something
Please give an example if it is

body > div {
	background: #aaa;
	display: flex;
	flex-wrap: wrap;


   body > div > div {
	flex-grow: 1;
	width: 33%;
	height: 100px;

Hi @jperson19468, > targets all the elements immediately under the parent element. So body > div targets all divs directly under the body. Hope that clarifies it


To re-iterate what Andres_Vaquero said abve the > symbol is commonly known as the ‘child selector’ or more correctly a child ‘combinator’ and selects immediate children of a parent but not grandchildren. Obviously if you are using it like this body > div > div then you are selecting the grandchildren of the body but only if they are div elements inside div elements.


<meta charset="utf-8">
<title>Untitled Document</title>
/* example 1 */
.test > li {color:red}

/* example 2*/
.test2 > span > span {color:red}


<ul class="test">
  <li>I'm Red</li>
  <li>I'm Red</li>
  <li>I'm Red</li>
      <li>I'm not red</li>
      <li>I'm not red</li>
      <li>I'm not red</li>
  <li>I'm Red</li>
  <li>I'm Red</li>

<div class="test2">
<span>I'm not red <span> I'm Red <span>I'm not red</span></span></span>


Don’t confuse inheritance as children will inherit some properties from the parent even though they are not specifically targeted.


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