Existem vários tipos de pseudo-classes. Podemos separá-las em dois grandes grupos: Estruturais e Dinâmicas. Existem outras pseudo-classes que não se encaixam nestes dois grupos principais, que controlam a interface do usuário, elementos de URLs e etc.
Não irei me alongar em todos os grupos, entenda melhor sobre todos os grupos e pseudo-classes diretamente da fonte:
CSS3 Selectors ou se quiser, temos uma tabela de compatibilidade de CSS para que você possa conferir o que funciona em cada browser.
Pseudo-classes Dinâmicas
As pseudo-classes dinâmicas controlam os estados dos elementos. Abaixo, vão alguns deles:
- :hover – quando passamos o mouse em cima do elemento.
- :active – quando ativamos o elemento. Por exemplo, quando clicamos em um link e não soltamos o botão do mouse. Nesse momento, estamos ativando a ação do elemento. Esse estado é ativado também quando navegamos pelos links pelo teclado utilizando o TAB. Este estado não há em todos os elementos.
- :visited – quando o link é visitado.
- :focus – quando um elemento recebe foco. Muito utilizado em campos de texto. Quando clicamos em cima um campo de texto para escrever, o elemento está ganhando foco.
Teoricamente, todos os elementos tem estes estados. Partindo dessa premissa, podemos fazer, por exemplo, um menu com submenu sem utilizar Javascript. Basta fazer com que ao passar em cima de uma LI, a UL que ela contém, apareça, ou seja, ganhe display: block;. Complicado? Claro que não. Veja o HTML abaixo:
Largue de ser preguiçoso, copie o código acima em um HTML com Doctype STRICT e veja o resultado no browser. Agora, defina o seguinte CSS:
No seletor UL LI UL, você selecionou a UL que está dentro da LI, e definiu para que ela não aparecesse com a propriedade display: none;.
No seletor UL LI:HOVER UL, como no seletor acima, você selecionou a UL que está dentro da LI. Mas com uma diferença: você colocou logo após a LI a pseudo-classe :hover, o seja, você definiou a UL que está dentro da LI, mas só quando o mouse é passado em cima dessa LI. Complicado? Que nada. Veja aí no seu exemplo como ficou, ou veja aqui.
Eu não preciso dizer que isso não funciona no IE6. Esse artigo faz parte daquela série: o que podemos fazer sem o IE6.
Abriu um pouco a cabeça para várias possibilidades, não é? Pois é. Essa é a idéia.
Pseudo-classes Estruturais
As pseudo-classes estruturais servem para selecionarmos um elemento da estrutura do código. Existem várias, por exemplo:
:first-child – seleciona o primeiro filho de um outro elemento.
:last-child – seleciona o último filho de um elemento.
:root – representa um elemento que é a raiz do documento. No HTML 4, é sempre a tag HTML.
:nth-child() – permite que selecionemos qualquer elemento no meio de um grupo de elementos. Por exemplo, você pode selecionar linhas de uma tabela. Assim, podemos fazer uma tabela zebrada, sem a ajuda de javascript. Há variações dessa pseudo-classe para podermos pegar os elementos de baixo para cima (:nth-last-child) e assim por diante. Testei aqui e isso não funcionou no meu FF3 (mac).
:lang() – seleciona elementos que tem o atributo lang com um valor específico. Veja um exemplo.
Um exemplo básico.
Imagine que você tem o seguinte HTML:
E agora, defina a formatação abaixo para este HTML:
Ao aplicar esse código, você vai perceber que o último destaque também tem uma borda do lado direito. Normalmente, queremos as bordas apenas entre os elementos do meio. Para fazer isso por meios não muito inteligentes, nós teríamos que marcar algum dos divs das laterais para tirar a borda, ou marcar o div do meio para definir uma borda para os seus dois lados.
Mas considere que você não pode modificar o HTML por algum motivo, e apenas é liberado modificações pelo CSS, como fazer?
A pseudo-classe :last-child pode ajudar. Você quer retirar a borda do último filho do div #DESTAQUES. Você iria inserir uma linha de CSS assim:
Você selecionou o DIV que é o último filho do div#destaques e retirou a borda da direita que havíamos dado logo anteriormente. Sem modificar o HTML, colocando novas tags ou novas classes apenas para retirar uma borda.
Há outras pseudo-classes como a :disabled ou :enabled, que modificam elementos com os atributos DISABLED ou ENABLED, como por exemplo, campos de texto, checkbox, radios etc.
O CSS pode fazer muito por nós, basta os navegadores implementarem essas possibilidades. É por isso toda essa campanha contra o Internet Explorer 6. Esse artigo e outros artigos fazem parte dessa campanha. É uma forma de mostrar o quanto perdemos de produtividade em nosso dia a dia.
