What does the following syntax mean?

HTML & CSS
1

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

or

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

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

3

Hi,

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.

e.g.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
/* example 1 */
li{color:#000}
.test > li {color:red}


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




</style>
</head>

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



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

</body>
</html>

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

2 Likes
4

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