39

Estava olhando o código do Twitter Bootstrap, e encontrei este CSS:

.table-condensed > tfoot > tr > td {
  /* ... */
}

Em sentido de funcionamento, qual seria a diferença de colocar apenas um espaço entre os elementos, e colocar o >?

1 Resposta 1

53
+50

element element { ...

O espaço entre dois elementos do CSS é o seletor de descendente.
Descendente é qualquer elemento que se encontra declarado dentro de outro.

element > element { ...

O > entre dois elementos do css é o seletor de filho.
Filho também é descendente, mas é o "descendente direto" especificamente. Ou seja, está diretamente inserido no elemento anterior.

Na prática:

Quando você escreve div span { ... }, você está dizendo qualquer span descendente (dentro) do div, e atuando no span nos dois casos abaixo:

<div><span> bla bla </span></div>
<div><a><span> bla bla </span></a></div>

Agora, quando usa div > span { ... }, vai ter efeito em apenas filhos do div, como este:

<div><span> bla bla </span></div>

Os atributos não vão ser aplicados em outros níveis de descendência, como neste caso:

<div><a><span> bla bla </span></a></div>

Motivo: o <span> neste último caso é "neto" do <div>, ou seja, é descendente mas não é filho, pois o filho é o <a>.

Veja o exemplo abaixo:

div span {
  text-decoration: underline
}

div>span {
  color: red
}
<div>
  Div 1
  <span> Span 1 </span>
</div>
<div>
  <a>
    Div 2
    <span> Span 2 </span>
  </a>
</div>
<div>
  <a>
    Div 3
    <span> Span 3 </span>
  </a>
  <span> Span 4 </span>
</div>

<br>Notar que o sublinhado ficou em todos os spans, mas o vermelho somente quando o span é filho (descendente de primeiro nível) do div

Você deve fazer log-in para responder a esta pergunta.

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