Embedded Files
Pseudo-elementos
Pseudo-elementos
Os pseudo-elementos nos permitem selecionar e estilizar partes específicas do conteúdo de um elemento HTML. Com eles, podemos aplicar formatação apenas na primeira linha de um parágrafo, destacar a primeira letra, ou ainda inserir conteúdo extra antes ou depois de um elemento sem precisar alterar o HTML.
Sintaxe geral:
Sintaxe geral:
seletor::pseudo-elemento {
propriedade: valor;
}
Principais pseudo-elementos:
Principais pseudo-elementos:
::first-line - Aplica estilos somente à primeira linha de um elemento de texto.
p::first-line {
font-size: 16px;
font-weight: bold;
}
::first-letter - Seleciona apenas a primeira letra de um elemento, muito usado em aberturas de artigos ou textos estilizados.
p::first-letter {
color: red;
font-size: 32px;
}
::before - Insere conteúdo antes do conteúdo real de um elemento. Para isso, usamos obrigatoriamente a propriedade content.
div::before {
content: "☻";
color: blue;
}
::after - Semelhante ao ::before, mas insere conteúdo depois do elemento.
div::after {
content: "♣";
color: red;
}
Tanto ::before quanto ::after são úteis para criar efeitos visuais e adicionar ícones ou símbolos sem alterar o HTML.
::selection
Personaliza a aparência do texto quando ele é selecionado pelo usuário.
p::selection {
color: red;
background-color: yellow;
}
Apenas algumas propriedades podem ser aplicadas aqui, como color, background-color, cursor e text-decoration.
Pseudo-classes
As pseudo-classes são palavras-chave adicionadas a seletores que definem um estado específico ou uma condição especial de um elemento.
Sintaxe geral:
Sintaxe geral:
seletor:pseudo-classe {
propriedade: valor;
}
Exemplos mais usados:
Exemplos mais usados:
:hover - Aplica estilos quando o usuário passa o mouse sobre o elemento.
button:hover {
background-color: coral;
color: aliceblue;
}
:active - Aplica estilos enquanto o elemento está sendo ativado (por exemplo, durante o clique).
button:active {
background-color: blue;
color: white;
}
:visited - Estiliza links que já foram visitados pelo usuário.
a:visited {
color: purple;
}
:focus - É aplicada quando um elemento recebe foco, seja por clique ou navegação via teclado (muito usado em formulários).
input:focus {
border: 2px solid blue;
outline: none;
}
Ordem recomendada (LVHA)
Ordem recomendada (LVHA)
Ao trabalhar com links, recomenda-se aplicar as pseudo-classes nesta ordem para evitar conflitos:
:link (link padrão)
:visited (link já visitado)
:hover (quando o mouse passa sobre)
:active (quando clicado)
Assim, com pseudo-elementos e pseudo-classes, você consegue estilizar estados e partes específicas de elementos HTML, criando interfaces mais ricas, interativas e profissionais.
Google Sites
Report abuse