CriarWeb.com > Manuais > Manual de CSS, folhas de estilo

Os pseudo-elements (pseudo-elementos, se traduzimos em português) servem para aplicar estilos a partes mais específicas dentro de uma etiqueta. Ou seja, para o exemplo concreto da etiqueta parágrafo, com os pseudo-elementos podemos definir o estilo para a primeira letra do parágrafo e para a primeira linha.

Pseudo-element first-letter

Um efeito habitual de algumas publicações, por exemplo, as de estórias para crianças, é fazer maior a primeira letra de una página e enfeita-la de alguma maneira. Com CSS podemos aplicar estilos específicos e fazer, por exemplo, que essa primeira letra seja maior e tenha uma cor diferente do resto do parágrafo.

Utiliza-se desta maneira:

P:first-letter {
font-size: 200%;
color: #993333;
font-weight: bold;
}

Assim, estamos atribuindo um tamanho de letra 200% maior do próprio parágrafo. Também estamos mudando a cor dessa primeira letra.

Dentre todas as propriedades de estilos, somente algumas podem se aplicar aos pseudo-elementos first-letter. São as seguintes, segundo a especificação do W3C: font properties, color properties, background properties,'text-decoration', 'vertical-align' (somente se 'float' estiver atribuído a 'none'), 'text-transform', 'line-height', margin properties, padding properties, border properties, 'float', 'text-shadow' e 'clear'.

Pode-se ver um exemplo de aplicação de um estilo com first-letter.

Pseudo-element first-line

Como adiantava, este pseudo-elemento, serve para atribuir um estilo próprio à primeira linha do texto. É possível que tenhamos visto alguma revista ou jornal que utilize este estilo para remarcar as primeiras linhas do parágrafo. Um exemplo de seu uso seria o seguinte:

P:first-line {
text-decoration: underline;
font-weight: bold;
}

As propriedades de estilos que podem se aplicar ao pseudo-element first-line são as seguintes: font properties, color properties, background properties, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' e 'clear'.

Pode-se ver um exemplo de aplicação de um estilo com first-line.

Uso de classes com os pseudo-elementos

Em determinadas ocasiões podemos necessitar criar uma classe (class) de CSS a qual atribuir os pseudo-elementos, de modo que estes não se apliquem em todas as etiquetas da página. Por exemplo, podemos desejar que somente se modifique o estilo da primeira linha do texto em alguns parágrafos e não em todos da página.

Uma classe se define com o nome da etiqueta seguido de um ponto e o nome da classe. Se ademais, desejarmos definir um pseudo-elemento, deveríamos indicá-lo a seguir, com esta sintaxe:

P.nomeclasse:first-line {
font-weight: bold;
}

Pseudo-elementos em CSS2

A parte de first-line e first-letter, nas especificações de CSS 2 existem outros pseudo elementos que vou nomear para conhecimento dos leitores, embora nos aprofundaremos em seu uso. Tratam-se de before e after e servem para inserir "conteúdos gerados" antes e depois do elemento ao qual atribuirmos estes pseudo-elements.

Um exemplo disso é:

P.nota:before {
content: "Nota: "
}

Assim, se definiu uma classe de parágrafo chamada "note" na qual se indica que antes da própria nota se deve incluir o texto indicado, ou seja, "Nota: ".

Atenção à compatibilidade com CSS2, que, pelo menos para estes elementos, não está suportada em versões 6 de Internet Explorer. Firefox, por sua vez, sim que é compatível com estas características de CSS2.