Quais são pseudo-classes?
A pseudo-classe é usada para definir um estado especial de um elemento.
Por exemplo, ele pode ser usado para:
- Estilizar um elemento quando o usuário passa o mouse sobre ele
- Estilo visitados e não visitados ligações de forma diferente
- Estilizar um elemento quando ele obtém o foco
Rato sobre mim
Sintaxe
A sintaxe de pseudo-classes:
selector:pseudo-class {
property:value;
}Anchor Pseudo-classes
Os links podem ser exibidos de diferentes formas:
Exemplo
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited
link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Tente você mesmo "  | Nota: a:hover DEVE vir após a:link e a:visited ! Na definição CSS, a fim de ser eficaz a:active DEVE vir após a:hover na definição CSS, a fim de ser eficaz!nomes pseudo-classe não são maiúsculas de minúsculas. |
|---|
Pseudo-classes e Classes CSS
Pseudo-classes podem ser combinadas com classes CSS:
Quando você passa o mouse sobre o link no exemplo, ela vai mudar de cor:
Passe o mouse sobre <div>
Um exemplo do uso do :hover pseudo-classe em um <div> elemento:
CSS - A :first-child Pseudo-classe
A :first-child pseudo-classe corresponde a um elemento especificado que é o primeiro filho de outro elemento.
Combinar o primeiro <p> elemento
No exemplo a seguir, o selector corresponde a qualquer <p> elemento que é o primeiro filho de qualquer elemento:
Combinar os primeiros <i> elemento em todas as <p> elementos
No exemplo a seguir, o seletor associa o primeiro <i> elemento em todas as <p> elementos:
Combinar todas as <i> elementos em todas as primeira criança <p> elementos
No exemplo a seguir, o selector corresponde a todos os <i> elementos <p> elementos que são o primeiro filho de um outro elemento:
CSS - A :lang Pseudo-classe
A :lang pseudo-classe permite definir regras especiais para diferentes idiomas.
No exemplo abaixo, :lang define as aspas para a <q> elementos com lang="no" :
Exemplo
<html>
<head>
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>
Tente você mesmo " 
mais Exemplos
Adicionar estilos diferentes para hiperlinks
Este exemplo demonstra como adicionar outros estilos de hiperlinks.
Uso de :focus
Este exemplo demonstra como usar a :focus pseudo-classe.
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4»
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 "ele" |
| :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 | Seleciona o elemento #news ativa atual (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 |
Todos CSS Elements Pseudo
| seletor | Exemplo | Descrição exemplo |
|---|---|---|
| ::after | p::after | Inserir conteúdo após cada <p> elemento |
| ::before | p::before | Inserir conteúdo antes 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 |