CSS

Pseudo-clases

Hay selectores de elementos que solo aplicarán cuando el elemento se encuentre en un estado especial (por ejemplo, si el puntero del ratón está encima o si es un campo de formulario con un valor incorrecto). Esos estados se llaman pseudo-clases y se utilizan así: selector:pseudo-clase { ... }.

<nav>
 <a href="#menu1">Menú 1</a>
 <a href="#menu2">Menú 2</a>
</nav>
<section id="menu1">
<p>Este es el contenido del Menú 1 que solo aparece cuando el ID de este elemento está seleccionado como fragmento en la URL. Para cambiar el fragmento de la URL se utilizan enlaces internos con apariencia de botón.</p>
</section>
<section id="menu2">
<form>
 <fieldset>
  <legend>Contacto</legend>
  <p>
   <label for="name_id">Nombre:</label><br>
   <input type="text" name="name" id="name_id" required>
  </p>
  <p>
   <label for="email_id">Email:</label><br>
   <input type="email" name="email" id="email_id">
  </p>
 </fieldset>
 <fieldset>
  <input type="submit" value="Enviar">
 </fieldset>
</form>
</section>
a:hover {
	background-color: #0069d9;
}
#menu1:target, #menu2:target {
  display: block;
}
#menu1, #menu2 {
  display: none;
  padding: 20px;
}
input:user-invalid {
  border: 2px solid red;
  box-shadow: 0 0 2px red;
  outline: red;
}
input[type="text"]:valid {
  border: 2px solid green;
  box-shadow: 0 0 2px green;
  outline: green;
}
nav {
  padding-top: 15px;
  width: 100%;
  text-align: center;
}
a {
  font-family: sans-serif;
  color: white;
  background-color: #007bff;
  padding: 7px 12px;
  border-radius: 5px;
  text-decoration: none;
}

❓ Ejercicio: Identifica todas las pseudo-clases, y explica su utilidad en el menú y formulario anterior.