Neste último tutorial de seletores, apresento a vocês uma forma muito especial de seletores. Estou falando sobre pseudo-classes e pseudo-elementos. Estes são seletores que não se referem a elementos HTML específicos, mas são gerados pelo dispositivo de saída.
Com pseudo-classes e pseudo-elementos, é possível definir declarações para partes de um HTML que não podem ser descritas claramente por meio de um elemento HTML. Exemplos típicos são um link hiperativo clicado ou um link hiperativo não visitado.
Estilizando hiperlinks
Muitas vezes, queremos estilizar os hiperlinks da página. Para isso, o CSS oferece várias opções para abordar e ajustar visualmente os diferentes estados de hiperlinks.
Se você deseja atribuir uma cor vermelha a um hiperlink, ficaria assim:
a:link {
color: red;
}
Por outro lado, com a pseudo-classe a:visited, os hiperlinks já visitados são marcados. Você pode representar os hiperlinks que foram clicados anteriormente com a cor azul, utilizando a seguinte sintaxe:
a:visited {
color:blue;
text-decoration:none;
}No navegador, fica assim:
Se você quer estilizar especialmente os hiperlinks que estão sendo clicados no momento, isso também é possível.
a:active {
font-weight: bold;
color: blue;
text-decoration: none;
}
Você pode usar a sintaxe a:active. 
Por outro lado, a sintaxe a:hover se refere ao estado em que o mouse passa por cima do hiperlink. Além disso, há um outro pseudo-elemento chamado a:focus. Isso descreve o momento em que o hiperlink recebe o foco.
Outros pseudo-elementos
Há pseudo-elementos que permitem lidar com partes de outros elementos. Um exemplo típico é ::first-letter. Este pseudo-elemento seleciona a primeira letra do elemento atual. Pode ser aplicado a todos os elementos que contêm texto. Mas atenção: pseudo-elementos devem ser escritos apenas no final de todos os seletores. Eles devem estar antes da chave de abertura.
h1::first-letter {
color: blue;
}
Com ::first-line, você pode selecionar a primeira linha de um elemento. Este pseudo-elemento só é aplicável a elementos de bloco. Um exemplo:
p::first-line {
background-blue;
}
E aqui está o resultado no navegador:
um
Através dos pseudo-elementos :after e :before, é possível inserir conteúdos adicionais antes e depois de um elemento. Com content, você determina o que deve ser exibido.
• normal – o pseudo-elemento normalmente definido não é gerado.
• none – o pseudo-elemento não é gerado.
• <string> – a cadeia de caracteres especificada aqui é exibida. Cadeias de caracteres devem ser colocadas entre aspas simples ou duplas.
• <uri> – o recurso especificado pelo URI é inserido.
• <counter> – define um contador ou seleciona um contador específico.
• attr(<identifier>) – o valor do atributo especificado entre parênteses é inserido.
• close-quote – insere uma aspa fechada.
• no-close-quote – não insere uma aspa fechada, mas aumenta a profundidade de aninhamento em um nível.
• no-open-quote – não insere uma aspa aberta, mas aumenta a profundidade de aninhamento em um nível.
• open-quote – insere uma aspa aberta.
Um exemplo:
ul li:before {
content: uri("bullet.gif");
}
Com o CSS3, foi introduzido o pseudo-seletor :not. Com ele, é possível selecionar conteúdos de forma direcionada. Um primeiro exemplo mostra quão poderoso este pseudo-seletor realmente é. Por exemplo, se você quiser selecionar todos os hiperlinks sem o atributo href. A sintaxe correspondente seria a seguinte:
a:not([href])
Os hiperlinks "normais" não seriam afetados por esta sintaxe. No entanto, você poderia acessar as definições de ancora através disso.
<a name="top">Topo</a>
Um exemplo mais detalhado mostra o poder de :not. Dentro de um documento, diversos parágrafos de texto foram definidos.
<body> <h1>PSD-Tutorials.de</h1> <p>Este é um parágrafo.</p> <p>Este é outro parágrafo.</p> <div>Esta é uma área de texto.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
Além dos parágrafos marcados com p, existem também uma área div e um hyperlink. Agora, o seguinte deve acontecer:
• Todos os parágrafos marcados com p terão a cor da fonte preta.
• Em todos os lugares onde não há parágrafos p, por outro lado, a cor da fonte vermelha será usada.
A sintaxe CSS correspondente é a seguinte:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}O Princípio da Herança
Uma das coisas mais importantes quando se trata de entender definições CSS é a herança. Na verdade, em CSS, as propriedades de estilo são herdadas de um elemento para outro.
Um exemplo:
html {
color: red
}Com essa definição, a cor do texto do elemento html é atribuída como vermelha.
Devido ao princípio de herança, essa definição de cor agora se aplica inicialmente a todos os elementos subordinados ao html. Portanto, inicialmente, todos os elementos abaixo do html serão exibidos em vermelho. A vantagem dessa abordagem é que para esses elementos você não precisa especificar explicitamente o vermelho como cor. Mas e se o conteúdo dos parágrafos p não deve ser exibido em vermelho? Nesse caso, é necessário reescrever a definição de cor do html superior.
html {
color: red;
}
p {
color: #000;
}
O que acontece agora se houver dois elementos p e div?
<body> <p>PSD-Tutorials.de</p> <div>Mundo</div> </body>
O resultado é o seguinte:
A definição de cor do html se aplica exclusivamente ao conteúdo de div. O parágrafo p, por outro lado, é exibido em uma fonte preta.
No CSS, existem diferentes maneiras de definir estilos. É por isso que pode haver instruções contraditórias para um elemento. Para esses casos, o CSS prevê um princípio de ponderação. Com base nesse princípio, fica claro quais instruções têm prioridade para um elemento. Não vou entrar em detalhes sobre esse princípio neste momento, mas você pode encontrar informações detalhadas sobre isso, por exemplo, no site http://wiki.selfhtml.org/wiki/CSS/Kaskade ou também em http://www.thestyleworks.de/basics/cascade.shtml.
O que importa para mim é mostrar o que você deve observar ao definir propriedades CSS. Para isso, o exemplo a seguir serve:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC;
}
h2 strong {
color: red;
}
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Este é um parágrafo com uma palavra <strong>em negrito</strong>.</p>
<h2>Este é um título com uma palavra <strong>em negrito</strong>.</h2>
</div>
</body>
</html>No navegador, isso se parece da seguinte forma:
Como você pode ver, palavras marcadas com strong são formatadas de maneiras diferentes. A formatação que prevalece depende, em última análise, da ordem das definições.
Como alternativa, há a palavra-chave !important, que pode ser usada para marcar uma instrução CSS como particularmente importante.
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC !important;
}
h2 strong {
color: red;
}
</style>Aqui está mais uma vez um olhar sobre o resultado:
É altamente recomendado que você também leia as fontes mencionadas neste tutorial. (Mesmo que no início você não precise entrar muito profundamente nesse assunto).
