Quais são pseudo-elementos?
A CSS pseudo-elemento é usado para estilo especificado peças de um elemento.
Por exemplo, ele pode ser usado para:
- Estilizar a primeira letra, ou linha, de um elemento
- Inserir conteúdo antes, ou depois, o conteúdo de um elemento
Sintaxe
A sintaxe de pseudo-elementos:
selector::pseudo-element {
property:value;
} | Observe a notação de dois pontos duplo - ::first-line contra :first-line Os dois pontos duplos substituiu a notação de cólon único para pseudo-elementos em CSS3. Esta foi uma tentativa de W3C para distinguir entre pseudo-classes e pseudo-elementos. A sintaxe e vírgula single foi usado para ambos os pseudo-classes e pseudo-elementos em CSS2 e CSS1. Para compatibilidade com versões anteriores, a sintaxe e vírgula única é aceitável para pseudo-elementos CSS2 e CSS1. |
|---|
O ::first-line Pseudo-elemento
A ::first-line pseudo-elemento é 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:
Nota: O ::first-line pseudo-elemento só pode ser aplicado para bloquear de nível elementos.
As seguintes propriedades são referentes ao ::first-line pseudo-elemento:
- font
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
O ::first-letter Pseudo-elemento
A ::first-letter pseudo-elemento é usado para adicionar um estilo especial para a primeira letra de um texto.
O exemplo a seguir formata a primeira letra do texto em todos os <p> elementos:
Nota: O ::first-letter pseudo-elemento só pode ser aplicado para bloquear a nível de elementos.
As seguintes propriedades são referentes ao ::first-letter pseudo- elemento:
- font propriedades
- color propriedades
- background propriedades
- margin propriedades
- padding propriedades
- border propriedades
- text-decoration
- vertical-align (apenas se "float" é "none" )
- text-transform
- line-height
- float
- clear
Pseudo-elementos e classes CSS
Pseudo-elementos podem ser combinados com classes CSS:
O exemplo acima irá exibir a primeira letra de parágrafos com class="intro" , em vermelho e em um tamanho maior.
Vários pseudo-elementos
Vários pseudo-elementos podem também ser combinados.
No exemplo a seguir, a primeira letra de um parágrafo será vermelha, em um tamanho de fonte xx-large. O resto da primeira linha será azul, e em small-caps. O resto do parágrafo será o tamanho da fonte padrão e cor:
Exemplo
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
} Tente você mesmo " CSS - O ::before Pseudo-elemento
O ::before pseudo-elemento pode ser usado para inserir algum conteúdo antes que o conteúdo de um elemento.
O exemplo a seguir insere uma imagem antes de o conteúdo de cada <h1> elemento:
CSS - O ::after pseudo-elemento
A ::after pseudo-elemento 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 <h1> elemento:
CSS - O ::selection Pseudo-elemento
A ::selection pseudo-elemento coincide com a parte de qualquer elemento que seja seleccionado por um utilizador.
As seguintes propriedades CSS pode ser aplicada a ::selection : color , background , cursor , e outline .
O exemplo a seguir faz com que o texto em vermelho selecionado em um fundo amarelo:
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 »
Todos CSS Elements Pseudo
| seletor | Exemplo | Descrição exemplo |
|---|---|---|
| ::after | p::after | Inserir algo depois que o conteúdo de cada elemento <p> |
| ::before | p::before | Inserir algo antes que o conteúdo de cada <p> elemento |
| ::first-letter | p::first-letter | Seleciona a primeira letra de cada <p> elemento |
| ::first-line | p::first-line | Seleciona a primeira linha de cada <p> elemento |
| ::selection | p::selection | Selecciona a parte de qualquer elemento que seja seleccionado por um utilizador |
Todas as Classes CSS Pseudo
| seletor | Exemplo | Descrição exemplo |
|---|---|---|
| :active | a:active | Selecciona o link ativo |
| :checked | input:checked | Seleciona todas as verificadas <input> elemento |
| :disabled | input:disabled | Seleciona todas as pessoas com deficiência <input> elemento |
| :empty | p:empty | Seleciona todos os <p> elemento que não tem filhos |
| :enabled | input:enabled | Seleciona todos os habilitado <input> elemento |
| :first-child | p:first-child | Seleciona a cada <p> elementos que é o primeiro filho de seu pai |
| :first-of-type | p:first-of-type | Seleciona todos os <p> elemento que é a primeira <p> elemento de seu pai |
| :focus | input:focus | Selecciona o <input> elemento que tem o foco |
| :hover | a:hover | Selecciona as ligações no rato mais |
| :in-range | input:in-range | Seleciona <input> elementos com um valor dentro de um intervalo especificado |
| :invalid | input:invalid | Seleciona todos <input> elementos com um valor inválido |
| :lang(language) | p:lang(it) | Seleciona todos os <p> elemento com um valor de atributo lang começando com "it" |
| :last-child | p:last-child | Seleciona a cada <p> elementos que é o último filho do seu pai |
| :last-of-type | p:last-of-type | Seleciona todos os <p> elemento que é o último <p> elemento de seu pai |
| :link | a:link | Seleciona todos os links não visitados |
| :not(selector) | :not(p) | Seleciona todos os elementos que não é um <p> elemento |
| :nth-child(n) | p:nth-child(2) | Seleciona todos os <p> elemento que é o segundo filho de seu pai |
| :nth-last-child(n) | p:nth-last-child(2) | Seleciona todos os <p> elemento que é o segundo filho de seu pai, a contar da última criança |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Seleciona todos os <p> elemento que é a segunda <p> elemento de seu pai, a contar da última criança |
| :nth-of-type(n) | p:nth-of-type(2) | Seleciona todos os <p> elemento que é a segunda <p> elemento de seu pai |
| :only-of-type | p:only-of-type | Seleciona todos os <p> elemento que é a única <p> elemento de seu pai |
| :only-child | p:only-child | Seleciona todos os <p> elemento que é o único filho de seu pai |
| :optional | input:optional | Seleciona <input> elementos sem "required" atributo |
| :out-of-range | input:out-of-range | Seleciona <input> elementos com um valor fora de um intervalo especificado |
| :read-only | input:read-only | Seleciona <input> elementos com um "readonly" atributo especificado |
| :read-write | input:read-write | Seleciona <input> elementos sem "readonly" atributo |
| :required | input:required | Seleciona <input> elementos com uma "required" atributo especificado |
| :root | root | Selecciona o elemento raiz do documento |
| :target | #news:target | Selecciona o ativo atual #news elemento (clicou em um URL que contém esse nome de âncora) |
| :valid | input:valid | Seleciona todos <input> elementos com um valor válido |
| :visited | a:visited | Seleciona todos os links visitados |