Seletores CSS Filho x Descendente

Estou um pouco confuso entre esses 2 seletores.

O seletor descendente :

div p

selecionar tudo pdentro divde um descendente imediato ou não? Então, se o pestiver dentro de outro, divele ainda será selecionado?

Em seguida, o seletor filho :

div > p

Qual é a diferença? Criança significa criança imediata ? Por exemplo.

<div><p>

vs

<div><div><p>

os dois serão selecionados ou não?

Pense no que as palavras "criança" e "descendente" significam em inglês:

• Minha filha é minha filha e minha descendente
• Minha neta não é minha filha, mas é minha descendente.

Sim você está correto. div pcorresponderá ao exemplo a seguir, mas div > pnão será.

<div><table><tr><td><p> <!...

O primeiro é chamado seletor descendente e o segundo é chamado seletor filho .

Bascailly, " ab seleciona" tudo b de dentro de um, enquanto " a> b " seleciona b de que só são filhos para o um , não vai selecionar b que é filho de b que é filho de um .

Este exemplo ilustra a diferença:

div span{background:red}
div>span{background:green}

<div><span>abc</span><span>def<span>ghi</span></span></div>

A cor de fundo abc e def será verde, mas ghi terá a cor vermelha.

IMPORTANTE: Se você alterar a ordem das regras para:

div>span{background:green}
div span{background:red}

Todas as letras terão fundo vermelho, porque o seletor descendente também seleciona a criança.

Em teoria: Criança => um descendente imediato de um ancestral (por exemplo, Joe e seu pai)

Descendente => qualquer elemento descendente de um ancestral em particular (por exemplo, Joe e seu tataravô)

Na prática: tente este HTML:

<div class="one">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

<div class="two">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

com este CSS:

span { color: red; } 
div.one span { color: blue; } 
div.two > span { color: green; }

http://jsfiddle.net/X343c/1/

Esteja ciente de que o seletor filho não é suportado no Internet Explorer 6. (Se você usar o seletor em um seletor jQuery / Prototype / YUI etc, em vez de em uma folha de estilos, ainda funcionará)

div p 

Seleciona todos os elementos 'p' em que o pai é um elemento 'div'

div> p

Significa filhos imediatos Seleciona todos os elementos 'p' onde o pai é um elemento 'div'

A seleção de CSS e a aplicação do estilo a um elemento específico podem ser feitas através da passagem pelo elemento dom [Exemplo

Exemplo

.a .b .c .d{
    background: #bdbdbd;
}
div>div>div>div:last-child{
    background: red;
}

<div class='a'>The first paragraph.
 <div class='b'>The second paragraph.
  <div class='c'>The third paragraph.
   <div class='d'>The fourth paragraph.</div>
   <div class='e'>The fourth paragraph.</div>
  </div>
 </div>
</div>