CSS - Pseudo Classes
As pseudo classes CSS são usadas para adicionar efeitos especiais a alguns seletores. Você não precisa usar JavaScript ou qualquer outro script para usar esses efeitos. Uma sintaxe simples de pseudo classes é a seguinte -
selector:pseudo-class {property: value}As classes CSS também podem ser usadas com pseudo-classes -
selector.class:pseudo-class {property: value}As pseudo classes mais comumente usadas são as seguintes -
| Sr. Não. | Valor e descrição |
|---|---|
| 1 | :link Use esta classe para adicionar um estilo especial a um link não visitado. |
| 2 | :visited Use esta classe para adicionar um estilo especial a um link visitado. |
| 3 | :hover Use esta classe para adicionar um estilo especial a um elemento ao passar o mouse sobre ele. |
| 4 | :active Use esta classe para adicionar um estilo especial a um elemento ativo. |
| 5 | :focus Use esta classe para adicionar um estilo especial a um elemento enquanto o elemento tem o foco. |
| 6 | :first-child Use esta classe para adicionar estilo especial a um elemento que é o primeiro filho de algum outro elemento. |
| 7 | :lang Use esta classe para especificar um idioma a ser usado em um elemento especificado. |
Ao definir pseudo-classes em um bloco <style> ... </style>, os seguintes pontos devem ser observados -
a: hover DEVE vir depois de um: link e a: visitado na definição CSS para ser eficaz.
a: active DEVE vir após a: hover na definição de CSS para ser eficaz.
Os nomes das pseudoclasses não diferenciam maiúsculas de minúsculas.
As pseudo classes são diferentes das classes CSS, mas podem ser combinadas.
A pseudo classe: link
O exemplo a seguir demonstra como usar a classe : link para definir a cor do link. Os valores possíveis podem ser qualquer nome de cor em qualquer formato válido.
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Black Link</a>
</body>
</html>Ele produzirá o seguinte link preto -
A: pseudo classe visitada
A seguir está o exemplo que demonstra como usar a classe : visitado para definir a cor dos links visitados. Os valores possíveis podem ser qualquer nome de cor em qualquer formato válido.
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = "">Click this link</a>
</body>
</html>Isso produzirá o seguinte link. Depois de clicar neste link, ele mudará sua cor para verde.
A pseudo classe: hover
O exemplo a seguir demonstra como usar a classe : hover para alterar a cor dos links quando colocamos o ponteiro do mouse sobre o link. Os valores possíveis podem ser qualquer nome de cor em qualquer formato válido.
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Bring Mouse Here</a>
</body>
</html>Ele produzirá o seguinte link. Agora você passa o mouse sobre este link e verá que ele muda de cor para amarelo.
A: pseudo classe ativa
O exemplo a seguir demonstra como usar a classe : active para alterar a cor dos links ativos. Os valores possíveis podem ser qualquer nome de cor em qualquer formato válido.
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Click This Link</a>
</body>
</html>Ele produzirá o seguinte link. Quando um usuário clica nele, a cor muda para rosa.
A pseudo classe: focus
O exemplo a seguir demonstra como usar a classe : focus para alterar a cor dos links focados. Os valores possíveis podem ser qualquer nome de cor em qualquer formato válido.
<html>
<head>
<style type = "text/css">
a:focus {color: #0000FF}
</style>
</head>
<body>
<a href = "">Click this Link</a>
</body>
</html>Ele produzirá o seguinte link. Quando este link é focalizado, sua cor muda para laranja. A cor muda de volta quando perde o foco.
A: pseudoclasse do primeiro filho
A pseudo classe : first-child corresponde a um elemento especificado que é o primeiro filho de outro elemento e adiciona um estilo especial a esse elemento que é o primeiro filho de algum outro elemento.
Para fazer: o trabalho do primeiro filho no IE <! DOCTYPE> deve ser declarado no início do documento.
Por exemplo, para indentar o primeiro parágrafo de todos os elementos <div>, você pode usar esta definição -
<html>
<head>
<style type = "text/css">
div > p:first-child {
text-indent: 25px;
}
</style>
</head>
<body>
<div>
<p>First paragraph in div. This paragraph will be indented</p>
<p>Second paragraph in div. This paragraph will not be indented</p>
</div>
<p>But it will not match the paragraph in this HTML:</p>
<div>
<h3>Heading</h3>
<p>The first paragraph inside the div. This paragraph will not be effected.</p>
</div>
</body>
</html>Isso produzirá o seguinte resultado -
A pseudo classe: lang
A pseudo-classe de idioma: lang , permite construir seletores com base na configuração de idioma para tags específicas.
Esta classe é útil em documentos que devem apelar a vários idiomas que têm convenções diferentes para certas construções de linguagem. Por exemplo, o idioma francês normalmente usa colchetes angulares (<e>) para fins de citação, enquanto o idioma inglês usa aspas ('e').
Em um documento que precisa abordar essa diferença, você pode usar a pseudoclasse: lang para alterar as aspas de forma adequada. O código a seguir altera a tag <blockquote> apropriadamente para o idioma que está sendo usado -
<html>
<head>
<style type = "text/css">
/* Two levels of quotes for two languages*/
:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
</head>
<body>
<p>...<q lang = "fr">A quote in a paragraph</q>...</p>
</body>
</html>Os seletores: lang serão aplicados a todos os elementos do documento. No entanto, nem todos os elementos usam a propriedade aspas, então o efeito será transparente para a maioria dos elementos.
Isso produzirá o seguinte resultado -