3

Em alguns vejo o operador ">" :

#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>

Qual sua Utilidade?

2

2 Respostas 2

6

Para pegar o elemento filho imediato, e não qualquer um filho.

Por exemplo:

.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>

Isso é muito útil em casos de menus onde você não quer que uma definição, mesma feita diretamente em tags, não sejam aplicadas para todos os elementos.

Exemplo:

nav.menu > ul{}
nav.menu > ul > li {}

Se eu tiver que colocar um outro ul pra criar um submenu dentro da li da classe .menu, não interferirá, já que o css está definido para o filho imediato de nav.menu (nav.menu > ul) e não para qualquer uldentro de nav.menu (nav.menu ul).

Então resumindo a diferença entre as duas formas poderia ser colocada assim:

nav.menu > ul = Filho imediato nav.menu ul = Qualquer filho

3

O operador > serve para indicar filhos diretos. Veja:

#panel_container > p{
    font-size: 28pt;  
}
<div id="panel_container">
    <p>Oi</p>
    <div class="teste">
   	    <p>Oi</p>
    </div>
 </div>

Perceba que somente o primeiro "Oi" ficou com 28pt de tamanho de fonte. Experimente retirar o operador > para você ver o que acontece! (Spoiler: nesse caso, qualquer p que seja filho de #panel_container, independente da profundidade, vai receber a propriedade).

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .