What is the ">" CSS operator for?

Asked

Viewed 1,694 times

3

In some see the operator ">" :

#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 Its Usefulness?

css

  • http://stackoverflow.com/questions/3225891/what-does-the-greater-than-sign-css-selector-mean

  • 1

    Very good question +1. I think it’s best to have this question in English

2 answers

6


To take the immediate child element, and not any one 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 cases of menus where you do not want a definition, even done 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 class li .menu, will not interfere, since css is set to the immediate child of nav.menu (nav.menu > ul) and not for any ulinside nav.menu (nav.menu ul).

So summing up the difference between the two forms could be put like this:

nav.menu > ul = Immediate son nav.menu ul = Any son

3

The operator > serves 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 "Hi" was with 28pt font size. Try removing the operator > for you to see what happens! (Spoiler: in this case, any p son of #panel_container, regardless of depth, will receive the property).

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.