Texto de: Letícia Garcez

Introdução

Nesse artigo falaremos sobre os pseudo-elementos e nas pseudo-classes do CSS. Estes tipos de seletores são extremamente poderosos, e diferentemente dos seletores normais, podem ser utilizados para aplicar estilos a um determinado elemento, conforme o seu estado, no caso das pseudo-classes, ou então a uma parte específica de um elemento HTML ao invés dele todo, no caso dos pseudo-elementos.

Seletores CSS básicos

Antes de entendermos sobre pseudo-classes e pseudo-elementos, é importante que saibamos quais seletores existem no CSS. Resumindo, existem quatro tipos de seletores básicos CSS:

• Seletores de tag - são representados apenas pelo nome de uma tag;
• Seletores de id - são representados com o símbolo # seguido do nome do id onde se deseja aplicar o estilo;
• Seletores de classe - são representados com o símbolo . seguido do nome da classe onde se deseja aplicar o estilo;
• Seletores de atributo - são representados por uma chave e seu valor entre colchetes, como type=[text].

Apenas esses seletores já permitem várias possibilidades de formatação no CSS, ainda mais porque podem ser combinados para gerar seletores mais específicos para um determinado elemento de código HTML. Geralmente uma pseudo-classe ou um pseudo-elemento está associado a algum seletor já definido com seletores de tag, id, classe e atributo, assim, saber utilizar estes seletores é essencial para aplicar as pseudo-classes e os pseudo-elementos apresentados neste artigo.

Pseudo-classes

Uma pseudo-classe CSS seleciona um elemento HTML conforme o estado deste elemento. Este estado pode estar relacionado com algum evento que ocorra no elemento (como um input do usuário ou uma interação com o mouse), ou então com a relação de uma tag com suas tags filhas.

As pseudo-classes iniciam com símbolo : (dois pontos) e são geralmente aplicadas a algum seletor CSS mais simples, como um seletor de classe ou um seletor de tag, permitindo formatações mais específicas conforme o estado do elemento.

Alguns exemplos de aplicação de pseudo-classes podem ser vistos abaixo:

a:hover{
	/*formatação*/
}
input[type = text]:focus{
	/*formatação*/
}
input.formulario:required{
	/*formatação*/
}
#lista:first-child{
	/*formatação*/
}

Existem diversas de pseudo-classes, e algumas delas estão listadas abaixo:

• :focus - representa um elemento que possui o foco, o que pode ocorrer quando o usuário seleciona o elemento através do teclado ou mouse;
• :hover - representa um elemento sobre o qual o mouse está se movendo;
• :checked - representa um elemento que esteja marcado ou que possua o estado ligado nos elementos HTML <radio>, <checkbox> ou <option> ;
• :required - é usada para selecionar um elemento <input>, <select>, ou <textarea>que tenha o atributo required;
• :first-child - é usada para selecionar um tipo de seletor que seja o primeiro filho de uma tag;
• :nth-child(x) - seleciona qualquer elemento que seja o filho de número x da tag onde esta pseudo-classe é aplicada;
• :fullscreen - representa os elementos que estão atualmente no modo tela-cheia.

Um pequeno exemplo de utilização das pseudo classes pode ser visto abaixo:

Pseudo-elemento

Um pseudo-elemento CSS é um seletor representado por :: (dois símbolos de dois pontos) que permite que você estilize uma parte específica do elemento selecionado e não um elemento na totalidade. No geral, os pseudo-elementos tem relação com as posições do conteúdo dentro do seletor ao qual estão associados, e você pode conferir alguns exemplos de utilização abaixo:

p::first-line{
	/*formatação*/
}
h1#tituloPrincipal::first-letter{
	/*formatação*/
}
div.conteudo::selection{
	/*formatação*/
}

Existem diversos pseudo-elementos no CSS, e alguns deles estão listados abaixo:

• ::after - cria um pseudo-elemento a qual é o último filho do elemento especificado antes do seletor;
• ::before - cria um pseudo-elemento sendo o primeiro filho do elemento especificado antes do seletor;
• ::first-letter - seleciona a primeira letra da primeira linha de um bloco;
• ::first-line - seleciona a primeira linha de um elemento no nível do bloco;
• ::spelling-error - seleciona um trecho de texto que tenha sido identificado pelo browser como possuindo erro de digitação;
• ::grammar-error - seleciona um trecho de texto que tenha sido identificado pelo browser como possuindo erro de gramática;
• ::selection - representa a parte de um texto selecionada pelo usuário

Um pequeno exemplo de utilização das pseudo classes pode ser visto abaixo:

Considerações finais

Pseudo-classes e pseudo-elementos são seletores muito importantes no CSS e nos permitem a seleção de diversos elementos, permitindo que possamos aplicar estilos a um elemento específico conforme o seu estado ou sua posição em um elemento pai. Estes recursos são extremamente poderosos e vale muito a pena se aprofundar um pouco mais nas possibilidades oferecidas por eles.