Uma pseudo-classe é usada para definir um estado especial de um elemento.
Por exemplo, ele pode ser usado para:
selector:pseudo-class {
property: value;
}
Os links podem ser exibidos de diferentes maneiras:
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;
}
<!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>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>
Pseudo-classes e classes CSS
As pseudo-classes podem ser combinadas com as classes CSS:
Quando você passa o mouse sobre o link no exemplo, ele muda de cor:
<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
color: #ff0000;
}
</style>
</head>
<body>
<p><a class="highlight" href="#">CSS Syntax</a></p>
<p><a href="#">CSS Tutorial</a></p>
</body>
</html>
Um exemplo de uso da :hover pseudo-classe 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>Mouse over the div element below to change its background color:</p>
<div>Mouse Over Me</div>
</body>
</html>
Outro exemplo
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
</style>
</head>
<body>
<div>Hover over me to show the p element
<p>Tada! Here I am!</p>
</div>
</body>
</html>
CSS – Pseudo classe do primeiro filho
A :first-childpseudo-classe corresponde a um elemento especificado que é o primeiro filho de outro elemento.
Corresponder ao primeiro elemento <p>
No exemplo a seguir, o seletor corresponde a qualquer elemento <p> que é o primeiro filho de qualquer elemento:
Exemplo
p:first-child {
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: blue;
}
</style>
</head>
<body>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
Combine o primeiro elemento <i> em todos os elementos <p>
No exemplo a seguir, o seletor corresponde ao primeiro elemento <i> em todos os elementos <p>:
Exemplo
<!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>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
<< Anterior Combinadores CSS
Deixe um comentário