Pseudo do CSS-classes (pseudo-classe )

Os seletores de pseudo-classe CSS correspondem a componentes com base em outras condições, não necessariamente definidas na árvore do documento. Os pseudo-classe CSS são palavras-chave adicionadas ao seletor que especificam o estado especial do elemento a ser selecionado. Por exemplo, :hover pode ser usado para mudar a cor do botão quando o usuário passar o mouse sobre ele.

O que são pseudo-classe

Os pseudo-classe CSS permitem que você defina estilos dinâmicos para elementos, como ao passar o mouse, ao estar ativo e ao focar, bem como para elementos existentes na árvore do documento que não podem ser alvo de outros seletores, sem adicionar qualquer seletor de ID ou classe, por exemplo, para o primeiro ou último filho.

Pseudo-classes start with a colon (:). Their syntax can be given as follows:

The following section describes the most commonly used pseudo-classes.

anchor pseudo-classes

UsingAnchorPseudo-class links can be displayed in different ways:

These pseudo-classes allow you to style unvisited links and visited links. The most common styling technique is to remove the underline from visited links.

a:link {
　　　　color: blue;
}
a:visited {
　　　　text-decoration: none;
}

Some anchor pseudo-classes are dynamic-They are applied due to user interaction with the document (such as hover or focus, etc.).

a:hover {
　　　　color: red;
}
a:active {
　　　　color: gray;
}
a:focus {
　　　　color: none;
}

These pseudo-classes change the way links respond to user actions.

• :hover Applies when the user places the cursor on the element but does not select it.

• :active Applies when the element is activated or clicked.

• :focus Applies when the element has keyboard focus.

:first-pseudo-classe child

:first-The pseudo-class child matches the first child element of some other elements. ol li:first-In the following example, the selector selects the first list item from the ordered list and removes the border from the top of it.

ol li:first-child {
　　　　border-top: none;
}

:last-pseudo-class

:last-The pseudo-class child matches the last child element of some other elements. ul li:last-The selector in the child example selects the last list item from the unordered list and removes the right border from it.

ul li:last-child {
　　　　border-right: none;
}

:nth-pseudo-classe child

CSS3Introduziu uma nova pseudo-classe :nth-A pseudo-classe child permite que você alvo um ou mais sub-objetos específicos de um pai dado. A sintaxe básica dessa escolha pode ser usada com :nth-child(N), onde N é um parâmetro que pode ser um número, uma palavra-chave (even ou odd) ou na forma de expressão xn+y, onde x e y são inteiros (por exemplo1n,2n,2n+1，...).

table tr:nth-child(2n) td {
　　　　fundo: #eee;
}

A regra de estilo no exemplo acima destaca apenas a linha da tabela, sem adicionar nenhum ID ou classe ao elemento.

Pseudo-classe :lang

A pseudo-classe :lang do CSS permite construir seletores com base no conjunto de idiomas específico de uma marcação.Definiu as aspas no elemento para atribuir claramente o valor de linguagem no.

q:lang(no) {
　　　　quotes: "~" "~";
}
/*　Fragmento de Código HTML　*/Algum texto Uma citação em um parágrafo Algum texto.

Pseudo-classe e Classe CSS

Pseudo-classe pode ser usada em conjunto com a classe CSS.

class="red" no exemplo a seguir, os links terão uma cor vermelha.

a.red:link {　　　　/*　regra de estilo　*/
　　　　cor: #ff0000;
}
<a class="red" href="#">Clique em Mim</a>　　　　/*　Fragmento de Código HTML　*/