CSS

Seletores do CSS: Pseudo-classes

Uma breve explicação sobre pseudo-classes, seus funcionamentos e tipos.

Por Diego Eis

• 22 comentários
• Tweet

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:

Home
Produtos

Carros
Motos
Charretes
Skates


Sobre
Contato

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:

ul li ul {
   display: none;
}

ul li:hover ul {
   display: block;
}

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:

Título do Destaque


		Nullam cursus, dui vitae rhoncus imperdiet, nibh justo fermentum lectus, ac faucibus est ipsum id mauris. Phasellus auctor pede sed sem. Proin metus diam, ullamcorper ac, aliquet sit amet, semper in, ipsum. Nullam turpis dui, tristique quis, cursus non, tristique ac, mauris. Nunc mauris. Sed adipiscing. Aliquam ultricies egestas eros. Etiam nec ipsum id justo vestibulum condimentum. Aenean rhoncus, erat at luctus tincidunt, dolor dolor pharetra sem, ac iaculis lacus neque ut lectus. Quisque elementum bibendum diam.
		

Título do Destaque


		Nullam cursus, dui vitae rhoncus imperdiet, nibh justo fermentum lectus, ac faucibus est ipsum id mauris. Phasellus auctor pede sed sem. Proin metus diam, ullamcorper ac, aliquet sit amet, semper in, ipsum. Nullam turpis dui, tristique quis, cursus non, tristique ac, mauris. Nunc mauris. Sed adipiscing. Aliquam ultricies egestas eros. Etiam nec ipsum id justo vestibulum condimentum. Aenean rhoncus, erat at luctus tincidunt, dolor dolor pharetra sem, ac iaculis lacus neque ut lectus. Quisque elementum bibendum diam.
		

Título do Destaque


		Nullam cursus, dui vitae rhoncus imperdiet, nibh justo fermentum lectus, ac faucibus est ipsum id mauris. Phasellus auctor pede sed sem. Proin metus diam, ullamcorper ac, aliquet sit amet, semper in, ipsum. Nullam turpis dui, tristique quis, cursus non, tristique ac, mauris. Nunc mauris. Sed adipiscing. Aliquam ultricies egestas eros. Etiam nec ipsum id justo vestibulum condimentum. Aenean rhoncus, erat at luctus tincidunt, dolor dolor pharetra sem, ac iaculis lacus neque ut lectus. Quisque elementum bibendum diam.
		

E agora, defina a formatação abaixo para este HTML:

div#destaques div{
	width: 300px;
	float: left;
	padding: 10px 30px;
	border-right: 1px solid black;
}

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:

div#destaques div:last-child {border-right:none;}

Veja o resultado final.

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.

• 22 comentários

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de Diego Eis