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 ul
dentro 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