Pseudo-classes CSS

O que é uma classe pseudo?

As classes pseudo são usadas para definir estados especiais dos elementos.

Por exemplo, pode ser usado para:

  • Definir estilo ao passar o mouse sobre o elemento
  • Definir estilos diferentes para links visitados e não visitados
  • Definir estilo do elemento ao obter foco
Passe o mouse sobre mim

Sintaxe

Sintaxe da classe pseudo:

seletor:pseudo-class {
  property: value;
}

Classe pseudo de âncora

Os links podem ser exibidos de diferentes maneiras:

Exemplo

/* Link não visitado */
a:link {
  color: #FF0000;
}
/* Link visitado */
a:visited {
  color: #00FF00;
}
/* Link com mouse sobre ele */
a:hover {
  color: #FF00FF;
}
/* Link selecionado */
a:active {
  color: #0000FF;
}

Experimente você mesmo

Atenção:a:hover Deve estar na definição CSS a:link E a:visited Para ser aplicado!a:active Deve estar na definição CSS a:hover Depois de serem definidas! O nome da classe pseudo é insensível a maiúsculas e minúsculas.

Classe pseudo e classe CSS

As classes pseudo podem ser usadas em conjunto com classes CSS:

Quando você passar o mouse sobre o link do exemplo, ele muda de cor:

Exemplo

a.highlight:hover {
  color: #ff0000;
}

Experimente você mesmo

Hover sobre <div>

Usando em <div> :hover Classe pseudo:

Exemplo

div:hover {
  background-color: blue;
}

Experimente você mesmo

Simples tooltip de sobreposição

Coloque o mouse sobre o elemento <div> para exibir o elemento <p> (efeito semelhante a um tooltip):

Coloque o mouse sobre mim para exibir o elemento <p>.

Hehe, eu estou aqui!

Exemplo

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover p {
  display: block;
}

Experimente você mesmo

CSS - :first-child pseudo-classe

:first-child Os pseudo-classes coincidem com o elemento especificado: o elemento é o primeiro filho de outro elemento.

Coincide com o primeiro elemento <p>

Neste exemplo a seguir, o seletor coincide com qualquer elemento <p> que é o primeiro filho de qualquer outro elemento:

Exemplo

p:first-child {
  color: blue;
}

Experimente você mesmo

Coincide com o primeiro elemento <i> dentro de todos os elementos <p>

Neste exemplo a seguir, o seletor coincide com o primeiro elemento <i> dentro de todos os elementos <p>:

Exemplo

p i:first-child {
  color: blue;
}

Experimente você mesmo

Coincide com todos os elementos <i> dentro do primeiro elemento <p>

Neste exemplo a seguir, o seletor coincide com todos os elementos <i> dentro de um elemento <p> que é o primeiro filho de outro elemento:

Exemplo

p:first-child i {
  color: blue;
}

Experimente você mesmo

CSS - :lang pseudo-classe

:lang os pseudo-classes permitem que você defina regras especiais para diferentes idiomas.

Neste exemplo a seguir,:lang Defina aspas para o elemento <q> com atributo lang="en":

Exemplo

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Algum texto <q lang="no">Uma citação em um parágrafo</q> Algum texto.</p>
</body>
</html>

Experimente você mesmo

Mais exemplos

Adicionar diferentes estilos a hiperligações
Este exemplo demonstra como adicionar estilos adicionais a hiperligações.
Use :focus
Este exemplo demonstra como usar o pseudo-classe :focus.

Todos os pseudo-elementos CSS

Selector Exemplo Descrição do exemplo
:active a:active Selecione cada link ativo.
:checked input:checked Selecione cada elemento <input> marcado.
:disabled input:disabled Selecione cada elemento <input> desativado.
:empty p:empty Selecione cada elemento <p> sem elementos filhos.
:enabled input:enabled Escolha cada elemento <input> que está habilitado.
:first-child p:first-child Escolha cada <p> que é o primeiro filho do pai.
:first-of-type p:first-of-type Escolha cada <p> que é o primeiro filho do pai.
:focus input:focus Escolha o elemento <input> que está focado.
:hover a:hover Escolha o link sobre o qual o mouse está suspenso.
:in-range input:in-range Escolha os elementos <input> com valores dentro de um intervalo específico.
:invalid input:invalid Escolha todos os elementos <input> com valores inválidos.
:lang(linguagem) p:lang(it) Escolha cada <p> cujo valor do atributo lang começa com "it".
:last-child p:last-child Escolha cada <p> que é o último filho do pai.
:last-of-type p:last-of-type Escolha cada <p> que é o último filho do pai.
:link a:link Escolha todos os links não visitados.
:not(seletor) :not(p) Escolha o elemento que não é <p>.
:nth-child(n) p:nth-child(2) Escolha cada <p> que é o segundo filho do pai.
:nth-last-child(n) p:nth-last-child(2) Escolha cada <p> que é o segundo filho do pai, contando a partir do último filho.
:nth-last-of-type(n) p:nth-last-of-type(2) Escolha cada <p> que é o segundo filho do pai, contando a partir do último filho.
:nth-of-type(n) p:nth-of-type(2) Escolha cada <p> que é o segundo filho do pai.
:only-of-type p:only-of-type Escolha cada <p> que é o único filho do pai.
:only-child p:only-child Escolha o elemento <p> que é o único filho do pai.
:opcional input:opcional Escolher os elementos <input> que não especificaram a propriedade "required".
:out-of-range input:out-of-range Escolher os elementos <input> cujos valores estão fora do intervalo especificado.
:read-only input:read-only Escolher os elementos <input> que especificaram a propriedade "readonly".
:read-write input:read-write Escolher os elementos <input> que não especificaram a propriedade "readonly".
:required input:required Escolher os elementos <input> que especificaram a propriedade "required".
:root root Escolher o elemento raiz do elemento.
:target #news:target Escolher o elemento #news ativo (clique em URL que contém o nome do âncora).
:valid input:valid Escolher todos os elementos <input> com valores válidos.
:visited a:visited Escolher todos os links visitados.

Todos os pseudo-elementos CSS

Selector Exemplo Descrição do exemplo
::after p::after Inserir conteúdo após cada elemento <p>.
::before p::before Inserir conteúdo antes de cada elemento <p>.
::first-letter p::first-letter Escolher a primeira letra de cada elemento <p>.
::first-line p::first-line Escolher a primeira linha de cada elemento <p>.
::selection p::selection Escolher a parte do elemento selecionado pelo usuário.