In some css I see the operator " & gt ; ":
#panel_conteiner > p {
color:red;
}
#panel_conteiner div{
padding:5px;
margin:2px;
}<div id="panel_conteiner">
<p>
teste teste
</p>
<fieldset>
<legend>
Legend
</legend>
<div>
<p>
conteudo
</p>
</div>
</fieldset>
</div>What is its usefulness?
To get the immediate child element, not any child.
For example:
.avo
{
background-color:red;
height:50px;
}
.avo > .pai > .filho {
color:red;
background-color:yellow;
height:20px;
}
.avo .filho{
background-color:green;
color:white;
}<div class="avo">
<div class="pai">
<div class="filho">Eu sou o filho</div>
</div>
<div class="filho">Eu sou o filho</div>
</div>This is very useful in case of menus where you do not want a definition, even made directly in tags, not applied to all elements.
Example:
nav.menu > ul{}
nav.menu > ul > li {}
If I have to put another ul to create a submenu within the li of the .menu class, it will not interfere, since the css is set to the immediate child of nav.menu ( nav.menu > ul ) and not for any% of% within% of% (% with%).
So summarizing the difference between the two forms could be put like this:
ul = Immediate child
nav.menu = Any child
The > operator is used to indicate direct children. See:
#panel_container > p{
font-size: 28pt;
}<div id="panel_container">
<p>Oi</p>
<div class="teste">
<p>Oi</p>
</div>
</div> Note that only the first "Oi" has% of font size%. Try removing the 28pt operator so you can see what happens! (Spoiler: In this case, any% of% that is the child of > , regardless of the depth, will receive the property.)