Pseudo-Elemento do CSS

O que são pseudo-elementos?

Os pseudo-elementos CSS são usados para definir estilos de partes específicas do elemento.

Por exemplo, pode ser usado para:

  • Definir estilos da primeira letra e da primeira linha do elemento
  • Inserir conteúdo antes ou depois do conteúdo do elemento

Sintaxe

Sintaxe dos pseudo-elementos:

selector::pseudo-element {
  property: value;
}

Pseudo-elemento ::first-line

::first-line O pseudo-elemento é usado para adicionar estilos especiais à primeira linha do texto.

O exemplo a seguir adiciona estilos à primeira linha de todos os elementos <p>:

Exemplo

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Experimente pessoalmente

Atenção:::first-line O pseudo-elemento só pode ser aplicado a elementos de bloco.

Os seguintes atributos se aplicam a pseudo-elementos: ::first-line Pseudo-elemento:

  • Atributo de fonte
  • Atributo de cor
  • Atributo de fundo
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Por favor, noteSintaxe de dois pontos - ::first-line Comparação :first-line

No CSS3, os dois pontos substituem a sintaxe de um ponto dos pseudo-elementos. Isso é uma tentativa do W3C de distinguirPseudo-classeEPseudo-elementoTentativas.

Os pseudo-classes e pseudo-elementos do CSS2 e CSS1 usam a sintaxe de um ponto.

Para compatibilidade retroativa, os pseudo-elementos do CSS2 e CSS1 aceitam a sintaxe de um ponto. A sintaxe de um ponto é usada pelo W3C para tentar distinguir

Pseudo-elemento ::first-letter

::first-letter O pseudo-elemento é usado para adicionar estilos especiais à primeira letra do texto.

O exemplo a seguir define o formato da primeira letra do texto de todos os elementos <p>:

Exemplo

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Experimente pessoalmente

Atenção:::first-letter O pseudo-elemento só se aplica a elementos de bloco.

Os seguintes atributos se aplicam ao pseudo-elemento ::first-letter:

  • Atributo de fonte
  • Atributo de cor
  • Atributo de fundo
  • Atributo do espaçamento externo
  • Atributo do espaçamento interno
  • Atributo da borda
  • text-decoration
  • vertical-align (apenas quando "float" for "none")
  • text-transform
  • line-height
  • float
  • clear

Pseudo-elementos e classes CSS

Pseudo-elementos podem ser usados em conjunto com classes CSS:

Exemplo

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Experimente pessoalmente

O exemplo acima exibirá a primeira letra da seção com class="intro" em vermelho e em um tamanho maior.

Múltiplos pseudo-elementos

Também pode combinar vários pseudo-elementos.

No exemplo a seguir, a primeira letra do parágrafo será vermelha e o tamanho da fonte será xx-large. O resto da primeira linha será azul e usando letras maiúsculas em pequeno. O resto do parágrafo será com tamanho de fonte e cor padrão:

Exemplo

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

Experimente pessoalmente

CSS - pseudo-elemento ::before

::before Pseudo-elementos podem ser usados para inserir conteúdo antes do conteúdo do elemento.

O exemplo a seguir insere uma imagem antes do conteúdo de cada elemento <h1>:

Exemplo

h1::before {
  content: url(smiley.gif);
}

Experimente pessoalmente

CSS - pseudo-elemento ::after

::after Pseudo-elementos podem ser usados para inserir conteúdo após o conteúdo do elemento.

O exemplo a seguir insere uma imagem após o conteúdo de cada elemento <h1>:

Exemplo

h1::after {
  content: url(smiley.gif);
}

Experimente pessoalmente

CSS - pseudo-elemento ::selection

::selection pseudo-elementos correspondem às partes do elemento selecionado pelo usuário.

As seguintes propriedades CSS podem ser aplicadas a ::selection:

  • color
  • background
  • cursor
  • outline

O exemplo a seguir exibe o texto selecionado em vermelho sobre um fundo amarelo:

Exemplo

::selection {
  color: red; 
  background: yellow;
}

Experimente pessoalmente

Todos os pseudo-elementos CSS

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

Todos os pseudo-classes CSS

Selector Exemplo Descrição do exemplo
:active a:active Escolha o link que está ativo.
:checked input:checked Escolha cada elemento <input> que está selecionado.
:disabled input:disabled Escolha cada elemento <input> que está desativado.
:empty p:empty Escolha cada elemento <p> que não tem filhos.
:enabled input:enabled Escolha cada elemento <input> que está habilitado.
:first-child p:first-child Escolha cada elemento <p> que é o primeiro filho do pai.
:first-of-type p:first-of-type Escolha cada elemento <p> que é o primeiro elemento <p> 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(language) p:lang(it) Escolha cada elemento <p> cujo valor do atributo lang começa com "it".
:last-child p:last-child Escolha cada elemento <p> que é o último filho do pai.
:last-of-type p:last-of-type Escolha cada elemento <p> que é o último elemento <p> do pai.
:link a:link Escolha todos os links não visitados.
:not(selector) :not(p) Escolha cada elemento que não é <p>.
:nth-child(n) p:nth-child(2) Escolha cada elemento <p> que é o segundo filho do pai.
:nth-last-child(n) p:nth-last-child(2) Escolha cada elemento <p> que é o segundo filho do pai, contando a partir do último filho.
:nth-last-of-type(n) p:nth-last-of-type(2) Selecionar cada <p> que seja o segundo filho do pai <p>, contando a partir do último filho
:nth-of-type(n) p:nth-of-type(2) Selecionar cada <p> que seja o segundo filho do tipo do pai.
:only-of-type p:only-of-type Selecionar cada <p> que seja o único filho do tipo do pai.
:only-child p:only-child Selecionar elementos <p> que sejam o único filho do pai.
:optional input:optional Selecionar elementos <input> que não tenham a propriedade "required".
:out-of-range input:out-of-range Selecionar elementos <input> cujos valores estejam fora do intervalo especificado.
:read-only input:read-only Selecionar elementos <input> que tenham a propriedade "readonly".
:read-write input:read-write Selecionar elementos <input> que não tenham a propriedade "readonly".
:required input:required Selecionar elementos <input> que tenham a propriedade "required".
:root root Selecionar o elemento raiz do elemento.
:target #news:target Selecionar o elemento #news atualmente ativo (clique em URL que contém o nome do âncora).
:valid input:valid Selecionar todos os elementos <input> com valores válidos.
:visited a:visited Selecionar todos os links visitados.