“Novas” regras CSS para o Internet Explorer 7 - Child Selector
January 1st, 2007. Published under IE, css, w3c. 3 Comments.
Com o lançamento do Internet Explorer 7, temos a nova disposição “novas” regras CSS que utilizaremos sem a preocupação, se o IE irá interpretá-las ou não. Essas “novas” regras possibilitarão ao desenvolvedor/designer um controle maior sobre os elementos HTML.
Com esse feito - um controle maior sobre os elementos HTML - evitamos a classite (falarei sobre ela em um outro post), ou seja, o uso excessivo de classes desnecessárias; bem como os ids. Então, vamos conhecer as “novas” regras CSS para o Internet Explorer 7:
Child Selector
O que é um child Selector?
É um tipo de regra CSS destinado aos filhos de um determinado elemento. Isto é, a regra CSS será aplicada somente aos filhos de um elemento HTML e não em seu neto, por exemplo.
Um exemplo de child Selector
Para clarear melhor a explicação sobre o que é um child selector, imagine o seguinte cenário:
<body>
<div>div filha 1 <div>div neta 1</div></div>
<div>div filha 2 </div>
</body>
E esta regra CSS:
body div {
padding: 20px;
}
Ou seja, todas as tags div do documento terão um padding de 20px. Não importando se ela é filha, neta ou bisneta da tag body. Agora, se utilizarmos a seguinte regra CSS:
body>div{
padding: 20px;
}
Somente as tags div filhas que receberão tal regra.
Com esse recurso não há aquela necessidade de adicionar à determinada tag uma classe ou um id; e com isso atribuir a regra CSS à classe ou id determinado.
Os child selectors foi (e ainda é em alguns sites) muito utilizado como um hack para esconder regras CSS do IE. Mas, no Internet Explorer 7 isto não acontecerá mais, uma vez que ele finalmente interpretará os child selector.
Se houver necessidade de esconder uma determinada regra CSS do IE 7; podemos utilizar um comentário vazio após o sinal de maior que da seguinte maneira:
body>/***/body .alguma_classe {
...
}
A regra CSS acima será ignorada pelo Internet Explorer 7 e sinceramente não sei o motivo. Alguém sabe? Comente aí 
3 Comments
Ana on June 24th, 2008
e se eu quiser somente as tags netas tenham padding 20px? 
alguem on August 26th, 2008
cai aqui nesse post antigo por acaso, mas respondendo a ANA:
.tag_vovó > * > div {padding:20px;}
Gustavo Paes on January 2nd, 2007
Olá Leandro,
Essa sua dica de esconder a regra CSS não funciona não. Todos os browsers ignoram a regra CSS. Firefox, IE6, IE7 e Opera (os que testei).
Portanto não é muito útil não!
[]s
Gustavo