Pseudoelementos CSS

Índice

O que são pseudoelementos?

Um pseudoelemento CSS é usado para estilizar partes especificadas de um elemento.

Por exemplo, pode ser usado para:

Estilize a primeira letra ou linha de um elemento
Inserir conteúdo antes ou depois do conteúdo de um elemento

Sintaxe

A sintaxe dos pseudoelementos:

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

O ::pseudoelemento de primeira linha

O pseudoelemento ::first-line é usado para adicionar um estilo especial para a primeira linha de um texto.

O exemplo a seguir formata a primeira linha do texto em todos os <p> elementos:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>

</body>
</html>

Nota: O pseudoelemento ::first-line só pode ser aplicado em nível de bloco elementos.

As propriedades a seguir se aplicam ao ::first-line pseudo-elemento:

propriedades da fonte
propriedades de cor
propriedades de fundo
espaçamento entre palavras
espaçamento entre letras
decoração de texto
alinhamento vertical
transformação de texto
altura da linha
claro

Observe a notação de dois pontos duplos - ::first-line versus :first-line

Os dois pontos duplos substituíram os dois pontos simples notação para pseudoelementos em CSS3. Esta foi uma tentativa do W3C de distinguir entre pseudoclasses e pseudoelementos.

A sintaxe de dois pontos únicos foi usada para pseudoclasses e pseudoelementos em CSS2 e CSS1.

Para compatibilidade com versões anteriores, a sintaxe de dois pontos é aceitável para CSS2 e CSS1 pseudo-elementos.

O ::pseudoelemento da primeira letra

O pseudoelemento ::first-letter é usado para adicionar um estilo especial ao primeiro letra de um texto.

O exemplo a seguir formata a primeira letra do texto em todos os <p> elementos:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
</style>
</head>
<body>

<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>

</body>
</html>

Nota: O pseudoelemento ::first-letter só pode ser aplicado em nível de bloco elementos.

As seguintes propriedades se aplicam ao pseudoelemento ::first-letter:

propriedades da fonte
propriedades de cor
propriedades de fundo
propriedades de margem
propriedades de preenchimento
propriedades de fronteira
decoração de texto
alinhamento vertical (somente se "float" for "none")
transformação de texto
altura da linha
flutuador
claro

Pseudoelementos e classes HTML

Pseudoelementos podem ser combinados com classes HTML:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}  
</style>
</head>
<body>

<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>

</body>
</html>

O exemplo acima exibirá a primeira letra dos parágrafos com class="intro", em vermelho e em tamanho maior.

Múltiplos Pseudoelementos

Vários pseudoelementos também podem ser combinados.

No exemplo a seguir, a primeira letra de um parágrafo será vermelha, em um tamanho de fonte xx grande. O resto da primeira linha será azul e em letras maiúsculas. O restante do parágrafo terá o tamanho e a cor da fonte padrão:

Exemplo

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

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>

</body>
</html>

CSS - O pseudo-elemento ::before

O pseudoelemento ::before pode ser usado para inserir algum conteúdo antes do conteúdo de um elemento.

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

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
  content: url(smiley.gif);
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>

<h1>This is a heading</h1>

</body>
</html>

CSS - O pseudo-elemento ::after

O pseudoelemento ::after pode ser usado para inserir algum conteúdo após o conteúdo de um 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 você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
  content: url(smiley.gif);
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The ::after pseudo-element inserts content after the content of an element.</p>

<h1>This is a heading</h1>

</body>
</html>

CSS - O pseudoelemento ::marker

O pseudoelemento ::marker seleciona o marcadores de itens da lista.

O exemplo a seguir estiliza os marcadores dos itens da lista:

Exemplo

::marker { 
  color: red;
  font-size: 23px;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
::marker { 
  color: red;
  font-size: 23px;
}
</style>
</head>
<body>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

</body>
</html>

CSS - O pseudoelemento ::selection

O pseudoelemento ::selection corresponde à parte de um elemento que é selecionado por um usuário.

As seguintes propriedades CSS podem ser aplicadas a ::selection: cor, plano de fundo, cursor e contorno.

O exemplo a seguir torna o texto selecionado vermelho sobre fundo amarelo:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
::selection {
  color: red;
  background: yellow;
}
</style>
</head>
<body>

<h1>Select some text on this page:</h1>

<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>

</body>
</html>

Todos os pseudoelementos CSS

::after

Exemplo

p::after

Exemplo de descrição

Insira algo após o conteúdo de cada elemento <p>

::before

Exemplo

p::before

Exemplo de descrição

Insira algo antes do conteúdo de cada elemento <p>

::first-letter

Exemplo

p::first-letter

Exemplo de descrição

Seleciona a primeira letra de cada elemento <p>

::first-line

Exemplo

p::first-line

Exemplo de descrição

Seleciona a primeira linha de cada elemento <p>

::marker

Exemplo

::marker

Exemplo de descrição

Seleciona os marcadores dos itens da lista

::selection

Exemplo

p::selection

Exemplo de descrição

Seleciona a parte de um elemento que é selecionado por um usuário

Todas as pseudoclasses CSS

:active

Exemplo

a:active

Exemplo de descrição

Seleciona o link ativo

:checked

Exemplo

input:checked

Exemplo de descrição

Seleciona todos os elementos <input> verificados

:disabled

Exemplo

input:disabled

Exemplo de descrição

Seleciona todos os elementos <input> desabilitados

:empty

Exemplo

p:empty

Exemplo de descrição

Seleciona todo elemento <p> que não possui filhos

:enabled

Exemplo

input:enabled

Exemplo de descrição

Seleciona todos os elementos <input> habilitados

:first-child

Exemplo

p:first-child

Exemplo de descrição

Seleciona todos os elementos <p> que são o primeiro filho de seu pai

:first-of-type

Exemplo

p:first-of-type

Exemplo de descrição

Seleciona cada elemento <p> que é o primeiro elemento <p> de seu pai

:focus

Exemplo

input:focus

Exemplo de descrição

Seleciona o elemento <input> que está em foco

:hover

Exemplo

a:hover

Exemplo de descrição

Seleciona links ao passar o mouse

:in-range

Exemplo

input:in-range

Exemplo de descrição

Seleciona elementos <input> com um valor dentro de um intervalo especificado

:invalid

Exemplo

input:invalid

Exemplo de descrição

Seleciona todos os elementos <input> com um valor inválido

:lang(language)

Exemplo

p:lang(it)

Exemplo de descrição

Seleciona cada elemento <p> com um valor de atributo lang começando com "it"

:last-child

Exemplo

p:last-child

Exemplo de descrição

Seleciona todos os elementos <p> que são o último filho de seu pai

:last-of-type

Exemplo

p:last-of-type

Exemplo de descrição

Seleciona cada elemento <p> que é o último elemento <p> de seu pai

:link

Exemplo

a:link

Exemplo de descrição

Seleciona todos os links não visitados

:not(selector)

Exemplo

:not(p)

Exemplo de descrição

Seleciona todos os elementos que não são um elemento <p>

:nth-child(n)

Exemplo

p:nth-child(2)

Exemplo de descrição

Seleciona cada elemento <p> que é o segundo filho de seu pai

:nth-last-child(n)

Exemplo

p:nth-last-child(2)

Exemplo de descrição

Seleciona cada elemento <p> que é o segundo filho de seu pai, contando a partir do último filho

:nth-last-of-type(n)

Exemplo

p:nth-last-of-type(2)

Exemplo de descrição

Seleciona cada elemento <p> que é o segundo elemento <p> de seu pai, contando a partir do último filho

:nth-of-type(n)

Exemplo

p:nth-of-type(2)

Exemplo de descrição

Seleciona cada elemento <p> que é o segundo elemento <p> de seu pai

:only-of-type

Exemplo

p:only-of-type

Exemplo de descrição

Seleciona todo elemento <p> que é o único elemento <p> de seu pai

:only-child

Exemplo

p:only-child

Exemplo de descrição

Seleciona todo elemento <p> que é filho único de seu pai

:optional

Exemplo

input:optional

Exemplo de descrição

Seleciona elementos <input> sem nenhum atributo "obrigatório"

:out-of-range

Exemplo

input:out-of-range

Exemplo de descrição

Seleciona elementos <input> com um valor fora de um intervalo especificado

:read-only

Exemplo

input:read-only

Exemplo de descrição

Seleciona elementos <input> com um atributo "readonly" especificado

:read-write

Exemplo

input:read-write

Exemplo de descrição

Seleciona elementos <input> sem atributo "somente leitura"

:required

Exemplo

input:required

Exemplo de descrição

Seleciona elementos <input> com um atributo "obrigatório" especificado

:root

Exemplo

root

Exemplo de descrição

Seleciona o elemento raiz do documento

:target

Exemplo

#news:target

Exemplo de descrição

Seleciona o elemento #news ativo atual (clicado em uma URL que contém esse nome de âncora)

:valid

Exemplo

input:valid

Exemplo de descrição

Seleciona todos os elementos <input> com um valor válido

:visited

Exemplo

a:visited

Exemplo de descrição

Seleciona todos os links visitados

Pseudoelementos CSS

Índice

O que são pseudoelementos?

Sintaxe

O ::pseudoelemento de primeira linha

Exemplo

O ::pseudoelemento da primeira letra

Exemplo

Pseudoelementos e classes HTML

Exemplo

Múltiplos Pseudoelementos

Exemplo

CSS - O pseudo-elemento ::before

Exemplo

CSS - O pseudo-elemento ::after

Exemplo

CSS - O pseudoelemento ::marker

Exemplo

CSS - O pseudoelemento ::selection

Exemplo

Todos os pseudoelementos CSS

::after

::before

::first-letter

::first-line

::marker

::selection

Todas as pseudoclasses CSS

:active

:checked

:disabled

:empty

:enabled

:first-child

:first-of-type

:focus

:hover

:in-range

:invalid

:lang(language)

:last-child

:last-of-type

:link

:not(selector)

:nth-child(n)

:nth-last-child(n)

:nth-last-of-type(n)

:nth-of-type(n)

:only-of-type

:only-child

:optional

:out-of-range

:read-only

:read-write

:required

:root

:target

:valid

:visited