Seletores CSS 2.1 - Parte 1

Publicado em: 10/10/2005
Atualizado em: 23/03/2011

Autor: Roger Johansson
URL do original: https://www.456bereastreet....selectors_part_1/
Título original: CSS2.1 selectors, Part 1
Traduzido com autorização expressa do autor

Seletores estão entre as primeiras coisas que você aprende quando começa a estudar CSS. Sem dúvida os seletores fazem parte dos assuntos fundamentais das CSS, contudo poucos desenvolvedores sabem tirar proveito de todo o seu potencial. Ainda que você possa fazer muitas estilizações com os seletores do tipo ID e os seletores de classes, há muito mais a fazer com seletores.

O conhecimento de como usar adequadamente todas as variantes de seletores disponíveis em CSS 2.1 irá ajudá-lo na tarefa de manter seu HTML bem mais claro. Você irá minimizar o uso do atributo class bem como a necessidade de adicionar elementos div e span extras na sua marcação. Parece legal, não é?

Então, por que toda esta variedade de seletores disponíveis ainda não está em pleno uso? A razão mais importante para isto é a falta de suporte para estes seletores pelo Internet Explorer, inclusive pela versão mais recente em uso, a versão 6. Todos os demais navegadores recentes suportam a maioria dos seletores CSS 2.1. Esteja ciente desta limitação antes de sair usando tudo que será explicado nestes tutoriais.

A boa notícia é que o Internet Explorer 7 irá oferecer melhor suporte para seletores. Sabendo que você poderá usá-los em um futuro próximo, esta é uma boa ocasião para aprender tudo sobre os seletores disponíveis.

Como existem muitos seletores a estudar, um artigo único, para explicar todos eles ficaria muito extenso. Assim, para tornar as coisas mais fáceis de digerir eu dividi o assunto em três partes:

1. Parte 1, é este artigo que explica os conceitos básicos sobre seletores e mais o seletor universal, o seletor tipo ID e o seletor de classe;
2. Parte 2, trata de combinação de seletores, grupamento de seletores e seletor de atributo;
3. Parte 3, será sobre pseudo-classes e pseudo-elementos.

Eu publicarei os artigos em algumas semanas e atualizarei cada um deles com os links para as outras partes tão logo as publique.

Tudo certo então. Vamos começar.

Seletor - Conceitos básicos

Vamos aos fundamentos básicos. Um seletor CSS é uma declaração em um formato que "casa" com todos os elementos que sigam aquele formato na árvore do documento. Quando todas as condições estabelecidas no formato da declaração são satisfeitas o seletor "casa" com o elemento (ou elementos) no documento e as regras escritas no seletor são aplicadas. Considere a regra CSS bem simples escrita a seguir:

p { color:#f00; }

O seletor é a parte da regra CSS que está antes do sinal “{“ (chave de abertura). O seletor aqui é p, que "casa" com todos os elementos p do documento e faz com que qualquer texto dentro de um parágrafo seja na cor vermelha. Bem básico.

Seletor - Visão geral

OK, este foi um exemplo bem simples. Adiante irei descrever todos os demais seletores e as coisas definitivamente ficarão mais flexíveis. Antes porém vamos a uma visão geral da sintaxe de todos os seletores CSS 2.1 (baseada nas especificações CSS 2.1, 5.1 Pattern matching):

Visão geral da sintaxe dos seletores CSS 2.1

Seletor	Formato	Descrição
Universal	*	Casa com qualquer elemento.
Tipo	E	Casa com qualquer elemento E.
Classe	.info	Casa com qualquer elemento cujo atributo class tem o valor info.
ID	#footer	Casa com qualquer elemento cuja id seja footer.
Descendente	E F	Casa com qualquer elemento F que seja descendente do elemento E.
Filho	E > F	Casa com qualquer elemento F que seja filho do elemento E.
Adjacente	E + F	Casa com qualquer elemento F que se segue imediatamente a E.
Atributo	E[att]	Casa com qualquer elemento E que tenha um atributo att independentemente do valor deste atributo.
Atributo	E[att=val]	Casa com qualquer elemento E que tenha um atributo att de valor igual a val.
Attribute	E[att~=val]	Casa com qualquer elemento E que tenha um atributo att de valor igual a um valor qualquer separado por um espaço de um valor igual a val.
Atributo	E[att|=val]	Casa com qualquer elemento E que tenha um atributo att de valor igual a um valor qualquer separado por um hífen de um valor começando com val.
Pseudo classe :first-child	E:first-child	Casa com o elemento E que for o primeiro filho do seu elemento pai.
Pseudo classe link	E:link E:visited	Casa com link ainda não vistado (:link) ou com link já visitado (:visited) links.
Pseudo classes dinâmicas	E:active E:hover E:focus	Casa com E quando de uma ação do usuário.
Pseudo classe :language	E:lang(c)	Casa com elementos E escritos no idioma c.
Pseudo-elemento :first-line	E:first-line	Casa com o conteúdo da primeira linha do elemento E.
O pseudo-elemento :first-letter	E:first-letter	Casa com a primeira letra do elemento E.
Pseudo-elementos :before e :after	E:before E:after	Usado para gerar conteúdo antes ou depois do conteúdo do elemento E.

Explicarei detalhadamente cada um destes seletores nas duas primeiras partes deste artigo, assim, continue lendo. Alguns termos usados na tabela acima e ao longo do artigo necessitam de uma explicação adicional:

descendente

Um elemento que é filho, neto ou descendente mais distante de um elemento, na árvore do documento.

ancestral

Um elemento que é pai, avô ou ancestral mais distante de um elemento na árvore do documento.

filho

O descendente direto de um elemento. Nenhum elemento existe entre os dois na árvore do documento.

pai

O ancestral direto de um elemento. Nenhum elemento existe entre os dois na árvore do documento.

sibling (irmãos)

Elementos irmãos, filhos do mesmo pai.

Seletores - Simples e combinados

Existem duas categorias básicas de seletores: os simples e os combinados.

Um seletor simples consiste em um tipo qualquer de seletor ou o seletor universal seguido por nenhum ou algum seletor de atributo, seletor tipo ID, seletor de classe ou pseudo-classe. A seguir uma regra contendo um exemplo de seletor simples:

p.info { background:#ff0; }

Um seletor combinado (algumas vezes chamado de seletor contextual) consiste de dois ou mais seletores simples separados por um elemento de combinação. A seguir um exemplo de seletor combinado.

div p { font-weight:bold; }

A regra acima aplica-se a todo elemento p que seja descendente do elemento div.

Um pseudo-elemento pode ser colocado como apêndice a um seletor. Em seletores combinados, o pseudo-elemento somente poderá ser adicionado como apêndice ao último seletor simples.

Nas Partes 2 e 3 deste artigo serão detalhados com mais profundidade os seletores combinados, os elementos de combinação e os pseudo-elementos.

O seletor universal

O seletor universal é representado por um asterisco, “*”, e casa com todos os elementos do documento. É raro ver-se empregado em uma folha de estilos, mas o seletor universal é muito usado com seletores tipo ID e seletores de classe. Se o seletor universal não for o único componente de um seletor simples, o “*” não deve ser usado :

• .myclass é equivalente a *.myclass
• #myid é equivalente a *#myid

Um uso bastante popular para o seletor universal é o uso para zerar margens e paddings de todos os elementos do documento:

* { margin:0; padding:0; }

Este procedimento é também conhecido como Global White Space Reset. (NT: link para matéria em ingles)

Seletores - tipo

Um seletor tipo, casa com qualquer instância de um determinado tipo de elemento. A regra a seguir casa com qualquer elemento (do tipo) parágrafo no documento e configura seu tamanho de fonte para 2em:

p { font-size:2em; }

Seletor - classe

O seletor de classe é representado por um ponto, “.”, e tem como alvo elementos com um determinado valor para seu atributo class. A regra a seguir aplica-se a todo elemento parágrafo cuja classe tenha o nome “info”:

p.info { background:#ff0; }

Você pode atribuir vários nomes para a classe de um elemento – o atributo class pode conter uma lista de vários nomes separados por espaço em branco. Assim, os seletores de classe podem ser usados para casar com elementos cuja classe contenha vários nomes. A regra a seguir casa com elementos p que tenham os nomes “info” e “error” declarados em seu atributo class:

p.info.error { color:#900; font-weight:bold; }

Nota: Seletores com múltiplos nomes de classes não são suportados pelas versões atuais do Internet Explorer, mas serão pelo IE7.

O tipo de elemento não precisa necessariamente ser declarado. Este procedimento, não declarar o tipo de elemento, equivale a usar o seletor universal como tipo de elemento. A regra a seguir casa com qualquer elemento da classe “info”, independentemente do tipo de elemento:

.info { background:#ff0; }

Seletor - ID

O seletor ID é representado por um sinal de "tralha" (ou "jogo da velha"), “#”, e tem como alvo elementos com um deteminado valor de atributo ID. A regra a seguir aplica-se a todos os elementos cujo nome de ID seja “info”, independentemente do tipo de elemento:

#info { background:#ff0; }

Se você especificar um determinado tipo de elemento a regra será aplicada somente àquele tipo de elemento que tenha o nome da ID especificado:

p#info { background:#ff0; }

É importante lembrar que seletores ID tem uma especificidade maior que seletores de classe e que um valor de ID deve ser único em um mesmo documento. Assim um determinado seletor ID será aplicável a um único elemento no documento.

A continuar …

OK, isto é tudo para a Parte 1 desta série de artigos. Na Parte 2 tratarei dos elementos de combinação de seletores, dos seletores combinados, de agrupamento de seletores e de seletores de atributo.

Ir para a Parte 2 »