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