Latest web development tutorials

CSS pseudo-elementos

CSS pseudo-elemento é usado para adicionar alguns seletores de efeitos especiais.

gramática

Pseudo-elemento de sintaxe:

selector:pseudo-element {property:value;}

classes CSS também pode usar pseudo-elementos:

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

: Primeira linha pseudo-elemento

"Primeira linha de" pseudo-elemento é usado para estabelecer um estilo especial para a primeira linha de texto.

No exemplo a seguir, o navegador irá basear-se em "primeira linha" pseudo-elemento no estilo da primeira linha do texto formato de elementos p:

Exemplos

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

tente »

Nota: "first-line" pseudo-elemento só pode ser usado para elementos nível de bloco.

NOTA: As seguintes propriedades podem ser aplicados ao "primeira linha" pseudo-elemento:

  • propriedades da fonte
  • propriedades de cor
  • propriedades do fundo
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • claro

: Primeiro letras pseudo-elemento

"First-letra" pseudo-elemento é usado para configurar um estilo especial à primeira letra do texto:

Exemplos

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

tente »

Nota: "first-letter" pseudo-elemento só pode ser usado para elementos nível de bloco.

NOTA: As seguintes propriedades podem ser aplicadas para o "primeiro-letra" pseudo-elemento:

  • propriedades da fonte
  • propriedades de cor
  • propriedades do fundo
  • propriedades de margem
  • propriedades de preenchimento
  • propriedades de fronteira
  • text-decoration
  • vertical-align (apenas se "float" é "none")
  • text-transform
  • line-height
  • flutuador
  • claro

Pseudo-elementos e classes CSS

Pseudo-elementos podem ser combinados com classes CSS:

p.article:first-letter {color:#ff0000;}

<p class="article">A paragraph in an article</p>

O exemplo acima fará com que toda a classe como a primeira letra do artigo n.º fica vermelho.

Vários pseudo-elementos

Uma pluralidade de pseudo-elementos podem ser combinados para uso.

No exemplo a seguir, o primeiro parágrafo da carta será exibido em vermelho, o tamanho da fonte é xx-large. A primeira linha do resto do texto será azul, e pequenas letras maiúsculas.

Os demais parágrafos do texto no tamanho padrão de fonte e cor para exibição:

Exemplos

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

tente »

CSS -: antes de pseudo-elemento

"Antes" pseudo-elemento podem inserir um novo conteúdo em frente do conteúdo do elemento.

O exemplo a seguir para inserir uma imagem na frente de cada <h1> elemento:

Exemplos

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

tente »

CSS -: após pseudo-elemento

": Depois de" pseudo-elemento pode inserir o novo conteúdo após o conteúdo do elemento.

Os exemplos a seguir inserir uma imagem após cada <h1> elemento:

Exemplos

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

tente »

Todos CSS pseudo-classes / elementos

seletor exemplo shows de exemplo
: Link a:link Selecione todos os links não visitados
: visited a:visited Selecione todos os links visitados
: ativa a:active Select é um link ativo
: hover a:hover Coloque o mouse sobre o status do link
: foco input:focus Depois de selecionar o elemento de entrada tem o foco
: First-letter p:first-letter Selecione a primeira letra de cada elemento <p>
: Primeira linha p:first-line Selecione a primeira linha de cada elemento <p>
: Primeiro-criança p:first-child <] P> selector elemento corresponde a qualquer elemento pertencente ao primeiro elemento filho
: antes p:before Inserir conteúdo antes de cada elemento <p>
: depois p:after Inserir conteúdo depois de cada elemento <p>
: Lang (idioma) p:lang(it) seleção de atributos lang <p> elemento para um valor inicial