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 >
?
O espaço entre dois elementos do css é o seletor de descendente.
Descendente é qualquer elemento que se encontra declarado dentro de outro.
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 no JS Fiddle.