Pseudo-classes CSS


O que são pseudo-classes?

Uma pseudo-classe é usada para definir um estado especial de um elemento.

Por exemplo, ele pode ser usado para:

  • Estilo de um elemento quando um usuário passa o mouse sobre ele
  • Estilo de links visitados e não visitados de maneira diferente
  • Estilize um elemento quando ele receber foco

selector:pseudo-class {
property: value;
}

 

Pseudo-classes âncora

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>


Passe o mouse em <div>

Um exemplo de uso da :hover pseudo-classe em um elemento <div>:

Exemplo

<!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>


 

Categoria: curso css | Tags: , , , , , , , , , , | Postado por joemaster em 03/jul/2020

<< Anterior

Próximo >>

Deixe um comentário

O seu endereço de e-mail não será publicado.