CSS Pseudoclasses
Uma pseudoclasse é usada para definir um estado
especial de um elemento.
- Estilizar um elemento quando um usuário passa
o mouse sobre ele
- Estilize links visitados e não visitados de
maneira diferente
- Estilize um elemento quando ele receber foco
Pseudoclasses
âncora
Os
links podem ser exibidos de diferentes maneiras:
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color:
green;
}
/* mouse over link */
a:hover {
color:
hotpink;
}
/* selected link */
a:active {
color:
blue;
}
</style>
</head>
<body>
<h2>Estilizando um link dependendo do
estado</h2>
<p><b><a
href="default.asp" target="_blank">Este é um
link</a></b></p>
<p><b>Nota: </b>a:hover DEVE vir
depois de a:link e a:visited na definição CSS para ser eficaz.</p>
<p><b>Nota:</b> a:active DEVE vir depois de a:hover na
definição CSS para ser eficaz..</p>
</body>
</html>
Pseudoclasses
e classes HTML
Pseudoclasses
podem ser combinadas com classes HTML:
<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
color:
#ff0000;
font-size:
22px;
}
</style>
</head>
<body>
<h2>Pseudoclasses e classes HTML</h2>
<p>Ao passar o mouse sobre o primeiro link
abaixo, ele mudará a cor e o tamanho da fonte:</p>
<p><a class="highlight"
href="css_syntax.asp">Sintaxe CSS</a></p>
<p><a href="default.asp">CSS
Tutorial</a></p>
</body>
</html>
Passe o mouse sobre <div>
Um exemplo de uso da :hover
pseudoclasse em um elemento <div>:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:
green;
color: white;
padding: 25px;
text-align: center;
}
div:hover {
background-color:
blue;
}
</style>
</head>
<body>
<p>Passe o mouse sobre o elemento div abaixo para
alterar sua cor de fundo:</p>
<div>Passe o mouse sobre mim</div>
</body>
</html>
Passar a dica de ferramenta
simples
Passe o mouse
sobre mim para mostrar o elemento <p>.
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: none;
background-color:
yellow;
padding: 20px;
}
div:hover p {
display: block;
}
</style>
</head>
<body>
<div>Passe o mouse sobre este elemento div para
mostrar o elemento p
<p>Tada! Aqui
estou! </p>
</div>
</body>
</html>
CSS
- A pseudoclasse :first-child
A :first-childpseudoclasse
corresponde a um elemento especificado que é o primeiro filho de outro elemento.
Combine
o primeiro elemento <p>
<!DOCTYPE
html>
<html>
<head>
<style>
p:first-child
{
color: blue;
}
</style>
</head>
<body>
<p>Texto
1</p>
<p>Texto
2</p>
<div>
<p>Texto 3</p>
<p>Texto 4</p>
</div>
</body>
</html>
Combine o primeiro
elemento <i> em todos os elementos <p>
o
seletor corresponde ao primeiro elemento <i> em todos os elementos
<p>:
<!DOCTYPE
html>
<html>
<head>
<style>
p
i:first-child {
color: blue;
}
</style>
</head>
<body>
<p>I
am a <i>strong</i> person. I am a <i>strong</i>
person.</p>
<p>I
am a <i>strong</i> person. I am a <i>strong</i>
person.</p>
</body>
</html>
Combine
todos os elementos <i> em todos os primeiros elementos <p> filhos
o
seletor corresponde a todos os elementos <i> nos elementos <p> que
são o primeiro filho de outro elemento:
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
color: blue;
}
</style>
</head>
<body>
<p>I am a
<i>strong</i> person. I am a <i>strong</i>
person.</p>
<p>I am a
<i>strong</i> person. I am a <i>strong</i>
person.</p>
<div>
<p>I am a <i>strong</i> person. I am a
<i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a
<i>strong</i> person.</p>
</div>
</body>
</html>
CSS - A pseudo-classe :lang
A :lang pseudoclasse
permite definir regras especiais para diferentes idiomas.
:langdefine as
aspas para elementos <q> com lang="no":
<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Algum texto <q
lang="no">Uma citação em um parágrafo</q> Some
text.</p>
<p>Neste exemplo, :lang define as
aspas para elementos q com lang="no":</p>
</body>
</html>