Seletores CSS não usados
22/03, 2006 11:34 por Fellipe
Não tenha dúvidas, o IE6 é uma porcaria. Ele, o tal IE6, é desgraçado por todos interfacers experientes por que é intrometido e prepotente. Lê coisas que não deveria e ignora muitas outras coisas que deveria ler. Em suma, é aquele cara chatão que parece gente boa para quem não o conhece, ou seja, 86% dos usuários.
Antes que essa gama enorme de pessoas perceba o quão incoveniente o IE6 é, o IE7 irá substituí-lo. De certa forma, isso é bom. Gostaria que as pessoas começassem a usar Firefox, contudo, nem sempre isso é uma questão de escolha.
Com o IE7 suportando grande parte do que o seu antecessor não foi capaz, poderemos finalmente usar e abusar dos seletores não usados CSS. Essa é uma das principais vantagens da nova versão.
O que raios é um seletor?
Seletor é o famoso getter para quem é do mundo da programação. Para quem é de outros mundos, seletor é o conjunto de regras que é capaz de especificar um grupo ou um indivíduo. No caso do CSS, o seletor pode especificar um grupo de elementos através de uma generalização ou então um único indivíduo, através de um id que deverá ser único.
A síntaxe básica de construção de um seletor CSS comum é:
atributo : valor ;
}
O papel do seletor é garantir que os valores definidos nos atributos apliquem-se no documento que faz referência, seja este um HTML, XML ou qualquer outro que siga os mesmos padrões de marcação.
Ele [o seletor CSS] faz isso através de uma regra de formação, que pode ser literal ou descritiva.
Seletor literal
Naturalmente, a forma literal de referência que podemos fazer através de um seletor é o jeito mais simples de entendermos a forma como o CSS funciona na prática. Observe:
color : red ;
}
Sabemos, com este exemplo acima, que os parágrafos <p> serão da cor vermelha em todo documento - caso nenhuma outra regra modifique-os novamente no futuro. Como dito, usei a forma literal para dizer ao renderizador qual o elemento que quero da cor vermelha. Este deve ser preferencialmente o primeiro passo no aprendizado de qualquer iniciante.
Outro bom exemplo de seletor literal pode acontecer quando queremos nos referenciar à um id.
margin : 10px ;
}
A principal diferença entre os tipos de seletores citados acima, apesar de ambos serem literais, é o efeito que eles causam em um documento ao qual são aplicados. Enquanto o exemplo 1 aplica-se à todos parágrafos, o segundo somente irá transformar o elemento cujo id é #topo. Repetindo: o id não pode repetir-se em um mesmo arquivo.
E o tempo passa…
As necessidades por formas mais complexas e abrangentes de regras surgem pouco tempo depois do primeiro contato com o CSS, pois existem situações que são literalmente inalcançáveis por que baseiam-se em relacionamentos ou características, e não necessariamente em ids ou tipos, como já descrito anteriormente.
Como muitos (não) devem saber, tudo em um documento HTML ou XML é encarado como um nó para os browsers (vulgo renderizadores). Esta estrutura de nós
pode ser encarada como uma árvore, onde cada nó pode ser representado como um tronco, um galho ou uma folha.
Todos elementos no HTML são nós
filhos do nó pai chamado <html> (que podemos considerar como o tronco do documento). O nó <title> é obrigatoriamente filho do nó <head> e consequentemente nó neto de <html>…
…não é tão complexo assim, vai 
Se a tag <meta> só pode ser incluída dentro de <head> e com certeza não pode ser filho de <title> (pois title é estéril), então <meta> é irmão de <title>, da mesma forma que <body> é irmão de <head>… tudo isso somente no contexto HTML, que preserva essa relação como um padrão.
Finalmente, o seletor descritivo
Os seletores descritivos entendem essa relação de pais e filhos (ou de troncos e galhos) e indicam coisas do tipo todos os filhos e netos de
ou então somente os filhos
ou ainda o irmão de
e por aí vai. Para exemplificar alguns casos, observe:
color : red ;
}
Todos strongs descendentes (filhos, netos, bisnetos) de li.
color : red ;
}
Todos strongs filhos (e somente filhos) de li.
color : red ;
}
Todos p que aparecem imediatamente após h1. Aê brother.
Ótimas funcionabilidades, certo? Ótimos por que atendem de forma muito mais inteligente o interfacer, que não precisaria mais criar ids no seu documento HTML para cada situação boba de ser resolvida pelo simples fato de querermos selecionar um irmão ou um filho. Mas, infelizmente alerto que os dois últimos exemplos acima simplesmente não funcionam no IE6 e ninguém sabe o motivo. O recurso simplesmente não foi implementado e ficou tudo por isso mesmo.
Espero que o desgosto fique bem claro para todos agora 
Farei outro artigo posteriormente focando apenas neste tipo de seletor, o descritivo. Fiz uma leitura sobre CSS3 alguns dias atrás e fiquei muito entusiasmado com o que vêm por aí. Ainda estou mastigando o conteúdo, depois eu cuspo aqui no blog
Este artigo foi publicado Wednesday, 22 de March de 2006 às 11:34 e foi categorizado como webstandards.
Você pode acompanhar os comentários deste post assinando o comment RSS (RSS 2.0 [?]).
Você também pode comentar ou atrelar um trackback [?] daqui no seu site.
4 comentários para “Seletores CSS não usados”
Deixe seu parecer sobre o artigo
- The WordPress Engine.
22 de March, 2006 às 15:02
Cara, isso mesmo. Vou acompanhar esses artigos de perto.
22 de March, 2006 às 18:44
Opa Fellipe! Muito boa sua didática nas explicações. Simples e objetivo, comunicação eficaz. Realmente, espera-se muito do CSS3. Pra frente e avante!
23 de March, 2006 às 16:47
E ai Fellipe,
eu já uso Firefox faz um tempo. Como eu tenho mac, nunca fui fã de windows, IE e cia ltda.
Como o Ciro falou alí, vai sair CSS3?
Abraços
27 de April, 2006 às 16:16
fico feliz que ainda existam pessoas que realmente criam e naum copiam. Meu chapa encontrei seu site de bobeira na web mas jah tah guarda em favoritos.
parabens.