“Novas” regras CSS para o Internet Explorer 7 – Child Selector

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 ideias sobre ““Novas” regras CSS para o Internet Explorer 7 – Child Selector

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

  2. cai aqui nesse post antigo por acaso, mas respondendo a ANA:

    .tag_vovó > * > div {padding:20px;}

    ;)