Você já ouviu falar nos pseudo-elementos ou nas pseudo-classes do CSS? Estes tipos de seletores são extremamente poderosos, no entanto muitas vezes acabam não sendo notados por pessoas que estão iniciando no estudo de CSS.

Podemos usar estas ferramentas para aplicar estilos a um determinado elemento, assim como qualquer seletor, porém possuem uma diferença significativa com relação aos demais seletores que é a seleção de um elemento HTML de acordo com o seu estado, ou então a seleção uma parte específica de um elemento HTML ao invés dele como um todo. Interessante não é?

Seletores CSS básicos

Antes de tudo, é importante que saibamos quais seletores existem no CSS. Já temos no blog da Cod3r um artigo que trata dos seletores básicos com um pouco mais de profundidade, mas resumindo, existem quatro tipos de seletores básicos CSS:

  • Seletores de tag – compostos apenas pelo nome da tag de um elemento.
  • Seletored de id – compostos com o símbolo # seguido do nome do id onde se deseja aplicar o estilo.
  • Seletores de classes – compostos com o símbolo . (ponto) seguido do nome da classe onde se deseja aplicar o estilo.
  • Seletores de atributo – compostos por uma chave e seu valor entre colchetes.

Estes seletores já permitem várias possibilidades de formatação no CSS, e ainda podem ser combinados para especificar ainda mais o elemento sobre o qual desejamos aplicar a formatação. Geralmente uma pseudo-classe ou um pseudo-elemento está associado a algum seletor definido através de seletores de tag, id, estilo e atributo, assim, saber utilizar estes seletores é essencial para aplicar os elementos apresentados neste artigo.

Então, sem mais delongas, vamos ao assunto deste artigo:

Pseudo-classes

Uma pseudo-classe CSS seleciona um elemento HTML de acordo com 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 geralmente são aplicadas a algum seletor CSS mais simples, como um seletor de classe ou um seletor de tag, permitindo formatações mais específicas de acordo com 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 diversos tipos de pseudo-classes, como as 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 – é utilizada para selecionar um elemento <radio>, <checkbox> ou <option> que esteja marcado ou com estado ligado.
  • :required – representa qualquer <input>, <select>, ou <textarea> que possua o atributo required.
  • :first-child – seleciona qualquer elemento que seja o primeiro filho da tag a qual essa pseudo-classe é aplicada.
  • :nth-child(x) – seleciona qualquer elemento que seja o filho de numero x da tag onde se aplica esta pseudo-classe.
  • :fullscreen – representa os elementos que estão atualmente no modo tela-cheia.

Pseudo-elemento

Um pseudo-elemento CSS é um seletor representado através de :: (dois símbolos de dois pontos) que permite que você estilize uma parte específica do elemento selecionado ao invés do elemento como um todo. Dessa forma, os pseudo-elementos frequentemente 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*/
}

Assim como as pseudo-classes, existem diversos pseudo-elementos dentro do CSS, e alguns deles estão listados abaixo:

  • ::after – cria um pseudo-elemento que é o último filho do elemento selecionado.
  • ::before – cria um pseudo-elemento que é o primeiro filho do elemento atingido.
  • ::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.

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 de acordo com o seu estado ou sua posição dentro de um elemento pai. Estes recursos são extremamente poderosos e sendo assim vale muito a pena se aprofundar um pouco mais nas possibilidades oferecidas por eles.

E como conteúdo “extra” eu recomendo a leitura deste artigo sobre especificidade que temos aqui no blog.

Bons estudos!!