Pseudo-classes e Pseudo-elementos em CSS - Tutorial

Uma das coisas mais fantásticas do CSS, além de permitir que os webmaster estilizem zilhões de páginas com pouco código, foi a capacidade de se criar efeitos especiais que antes só eram possível através de uma linguagem de programação, como o JavaScript.

Neste Tutorial de CSS de nossa apostila, vamos aprender o que são e como usar as pseudo-classes e -elementos, que nos permitirão criar diversos efeitos com os mais variados elementos do HTML, como em menus, links, formulários etc.

Obtenha AQUI seu certificado de Webmaster!

Pseudo-classes e Pseudo-elementos em CSS

Até o momento estudamos CSS através do uso de seletores, que como o próprio nome diz, servem para selecionar, identificar e atuar somente em uma região de nosso código HTML, afinal, queremos um estilo em uma parte de nosso site, e outro tipo de estilo em outra região do site.

Assim, os seletores servem para identificar cada trecho do site na qual queremos aplicar determinado estilo. E fizemos isso, inicialmente, identificando certas tags e depois aprendemos a criar nossas próprias divisões com a tag <div> e a <span>, bem como nomeá-las com os seletores ID e CLASS.

O que vamos aprender neste tutorial de CSS é identificar determinados tipos de ações, de interações entre o leitor de seu site e o código, algo que não é possível com seletores e tags normais.
Um pouco confuso, não?
Vamos dar exemplos, exemplos sempre são melhores que definições e teoria, para se entender melhor uma ideia.

Certamente você já deve ter notado que os links tem uma cor antes de clicar, e depois de visitados tem outra. E então, como identificar, selecionar isso?
Não dá pra fazer com as tags e seletores que conhecemos até o momento em nossos tutoriais de CSS, somente com pseudo-classes e pseudo-elementos que vão selecionar esses momentos (antes e depois).

Os pseudo-classes também são usados para identificar determinadas ações, como pousar o mouse em cima de um link e fazê-lo mudar de cor, ou pousar o mouse em cima de um menu e se abrir uma lista de opções.

Ou seja, pseudo-classes e pseudo-elementos não identificam locais, divisões ou tags, como as classes e elementos comuns, eles são usados para trabalharmos com interação do CSS com o usuário e com ações, nos permitindo criar efeitos bem interessantes.

Sintaxe - Como usar pseudo-classes e pseudo-elementos em CSS

O que caracteriza uma pseudo-classe é o uso dos dois pontos :

A sintaxe de uma pseudo-classe é:
seletor : pseudo-classe {
     regras CSS;
}

Se estiver usando uma classe:
seletor.minhaCLASSE : pseudo-classe {
     regras CSS;
}

Se estiver usando ID:
seletor#minhaID : pseudo-classe {
     regras CSS;
}

Por exemplo, um seletor normal para aplicar CSS em parágrafos:
p { regras CSS}

Mas se você quiser aplicar um estilo quando o visitante passa o mouse nesse parágrafo, você deve usar a pseudo-classe :hover:
p:hover {regras CSS}

Vamos ver algumas pseudo-classe e exemplos de uso.

CSS em links - :link, :visited , :hover e :active

Agora que já vimos o que são, para que servem e a sintaxe de uso dos pseudo-elementos e pseudo-classes em CSS, vamos ver exemplos disso na prática.

Vamos ver como criar alguns efeitos e estilos interessantes em CSS para links ( tag <a>), usando as pseudo-classe:

• :link - Colocando esta pseudo-classe com a tag <a>, definimos que queremos aplicar o CSS antes do link ser clicado
• :visited - Já a pseudo-classe :visited define o CSS do link após ele já ter sido clicado e visitado anteriormente pelo usuário
• :hover - Ao adicionar essa pseudo-classe em seu seletor, o CSS só será aplicado quando o visitante estiver passando o mouse por cima do elemento.
• :active - Se usar esta pseudo-classe, o CSS será aplicado durante a ação. Por exemplo, com links, a ação é durante o clique. Ou seja, não é antes, nem na hora do clique e nem depois, a regra CSS é aplicada entre o momento que você aperta e solta o mouse (nesse caso, é algo bem rápido que geralmente nem dá pra ver)

Vamos usar todas estas quatro pseudo-classes em um exemplo.

Primeiro, em nosso documento .html, criamos um simples link e linkamos com a folha de estilos estilo.css:

<!DOCTYPE html>
 
<html> 
 <head>
 <title>Tutorial de CSS - Pseudo-classe e Pseudo-elemento</title>
 <meta name="description" content="O que são pseudo-classes e -elementos">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <link rel="stylesheet" type="text/css" href="estilo.css"/>
</head>
 <body>
 <a href="#"> Meu Link </a>
 </body>
</html>

Queremos que, antes de ser clicado o link seja da cor azul (fazemos isso com :link).

Após o link ser clicado, ele terá a cor vermelha (:visited)

Quando você passar o mouse por cima do link, ele terá a cor amarela ( :hover )

E, por fim, se você segurar o clique no link, verá ele na cor ver ( :active )

Nossa folha de estilos CSS para este exemplo é:

a:link {
 color: blue;
}

a:visited {
 color: red;
}

a:hover {
 color: yellow;
}

a:active {
 color: green;
}

Criando um menu com :hover em CSS

As pseudo-classes :link, :visited, :hover e :active são vastamente usadas por webmasters e webdesigners em links, porém seu uso vai bem mais além disso.

Como exemplo, vamos criar um menu simples, feito de lista não ordenada, mas com o dinamismo da pseudo-classe :hover.

Ou seja, teremos um menu de opções com a tag <ul> com diversas opções e ao passarmos o mouse por tais itens da lista, outra lista (interna) irá se expandir mostrando mais elementos.

Inicialmente criamos uma lista com as tags <ul> </ul>.

Dentro dela colocamos quatro itens com as tags <li></li>: "Linguagem de marcação: HTML", "Linguagem de estilo: CSS", "Linguagem de programação desktop" e "Linguagem de programação web".

Porém, dentro da tag <li></li> do item "Linguagem de programação desktop", vamos criar outra lista, uma interna, de novo com a tag <ul> e dentro dela colocaremos mais 3 itens com a tag <li> "C", "C++" e "Java".

Fazemos exatamente o mesmo com o item "Linguagem de programação web", criando 2 itens "JavaScript" e "PHP".

O código HTML desse menu com lista fica:

<ul>
   <li>Linguagem de marcação: HTML></li>
   <li>Linguagem de estilo: CSS</li>
   <li>Linguagens de programação desktop
      <ul>
        <li>C</li>
        <li>C++</li>
        <li>Java</li>
      </ul>
   </li>
   <li>Linguagens de programação web
      <ul>
        <li>JavaScript</li>
        <li>PHP</li>
      </ul>
   </li>
</ul>

Agora vamos estilizar essa lista.

Queremos que esta lista interna, com as linguagens de programação desktop e web só apareça quando passarmos o mouse em cima delas.

Acessamos esses itens internos através de Seletores Descendentes: ul li ul

Quando não passamos o mouse em cima, queremos que nada aconteça (isso é feito com o código CSS display: none).

Mas se passarmos o mouse em cima (:hover), essa lista é exibida (código display: block).

O código CSS da folha de estilos para este tutorial é:

ul li ul {
 display: none;
}
  
ul li:hover ul {
 display: block;
}

CSS em textos - :first-letter e :first-line

Duas importantes pseudo-classes usadas na formatação de textos em HTML são as :first-letter (primeira letra) e :first-line (primeira linha), que como os próprios nomes podem sugerir, servem para formatar a primeira letra de um elemento e a primeira linha inteira.

Por exemplo, é bem comum vermos textos em que a primeira letra de um parágrafo é bem maior que as outras, geralmente com uma cor ou tamanho diferente. Isso é feito com a :first-letter.

Vamos fazer esse feito.

Dentro da tag <body>, crie somente um parágrafo com a tag <p>.com algum texto (com várias linhas, de preferência).

Na folha de estilo, vamos definir que a primeira letra de todo parágrafo tenha tamanho 40 pixels e cor vermelha. O código CSS é:

p:first-letter {
 font-size: 40px;
 color: red;
}

Crie seu documento .html e sua folha .css para ver o resultado, deve ser parecido com este:

Agora troque :first-letter por :first-line e veja o resultado (a primeira linha inteira será estilizada com tamanho 40 pixel e cor vermelha).

Outras pseudo-classes em CSS

Existem uma diversidade enorme, grande mesmo, de pseudo-classe e pseudo-elementos ao nosso dispor pelo CSS.
Certamente, poucas pessoas tem conhecimento de todas estas ferramentas, e menos ainda usam todas, até porque o CSS continua sempre a evoluir e fornecer novas tecnologias para facilitar nossas vidas.

Porém, durante sua carreira ou hobbie como webmaster, vai precisar estilizar algum elemento ou interatividade específica que pode ser complicado de uma maneira, ou bem simples usando alguma pseudo-classe menos famosa.

Por isso, dê uma bela lida nessas outras pseudo-classes, podem-lhe ser útil no futuro.

:focus

Se você entendeu bem como funciona a :hover, certamente vai entender fácil a utilidade da :focus, pois esta pseudo-classe serve para focalizar um elemento de sua página HTML quando ele está selecionado.
Por exemplo, aperte TAB algumas vezes em qualquer site, verá que os elementos do site, como links e formulário serão selecionados, um por um.

A :focus é vastamente usada em formulário.
Com certeza você lembra de algum formulário que, ao selecionar um campo para preencher, ele era focalizado, geralmente mudando levemente a cor dele.

Sintaxe para mudar a cor do campo quando ele for selecionado:

input:focus {
   background-color: gray;
}

:before e :after

A função destes dois pseudo-elementos são bem simples, mas extremamente úteis.
Elas nos permitem adicionar conteúdo antes (before) e/ou depois (after) de um elemento de seu código HTML.

Por exemplo, você pode adicionar um texto antes do primeiro parágrafo "Tutorial de CSS", ou ao final "Tutorial criado por Apostila HTML Progressivo":

p.primeiro:before {
    content: "Tutorial de CSS: " 
}

p.ultimo:after {
    content: "Tutorial criado por Apostila HTML Progressivo"
}

:first-child e :last-child

O pseudo-elemento :first-child serve para identificar o primeiro elemento, dentre todos de uma página HTML para estilizar com o CSS (first é primeiro, em inglês).
Já o :last-child faz o contrário, ele identifica o último elemento do documento.

Por exemplo, para deixar o primeiro parágrafo em itálico e o último em negrito:

p:first-child {
 font-style: italic;
}

p:last-child {
 font-weight: bold;
}

E caso seu site só tenha um parágrafo, o que ocorre?
Ora, o parágrafo fica em itálico e em negrito, pois o único parágrafo é tanto o primeiro como o último.

:nth-child( valor )

O pseudo-elemento :nth-child faz o que o :first-child e o :last-child fazem, e muito mais, pois ele permite que você selecione qualquer elemento de seu site.
A diferença dele pros anteriores é que você vai ter que usar um pouco de raciocínio, pois vai ter que dizer de uma maneira matemática que elemento vai selecionar.

Se quiser selecionar o primeiro elemento-> :nth-child(1)
Se quiser selecionar o segundo elemento-> :nth-child(2)
Se quiser selecionar os elementos pares-> :nth-child(2n)
Se quiser selecionar os elementos ímpares-> :nth-child(2n+1)

:lang( língua )

Seleciona todo elemento que foi assinalado com a linguagem "língua".

:root

Seleciona o elemento raiz (root) do documento (em documentos .html é o <html>).

:empty

Seleciona elementos que não tenham filhos.

:only-child

Seleciona elementos que sejam o único filho de seu elemento pai.

:enabled, :disabled, :checked e :selection

Seleciona elementos estão habilitados (enabled), desabilitados (disabled), marcados (checked) e/ou selecionados (selection).

:first-of-type
:last-of-type
:only-of-type