Pseudoclases

pseudoclases.css

/* Aplico estilos para elemento enfocado
  a todas las etiquetas cuyo atributo type sea text */
body {
  background: #EED870;
}

#pseudoclase-focus input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid gray;
}

#pseudoclase-focus input:focus {
  /* background: yellow; */
  background: white;
}

#pseudoclase-hover button {
  background-color: black;
  color: white;
  border: 1px solid gray;
  padding: 2rem;
  border-radius: 10px;
  transition: 100ms linear; /* ANIMACIONES! */
  position: relative;
  top: 0;
}

#pseudoclase-hover button:hover {
  background-color: white;
  color: black;
  position: relative;
  top: -20px;
}

#pseudoclase-empty .lista-tareas {
  list-style: none; /* borra viñetas */
}

#pseudoclase-empty .lista-tareas:empty {
  border: 1px dotted red;
  padding: 1rem;
}

#pseudoclase-child .imagenes :first-child {
  border: 3px solid red;
} 

#pseudoclase-child .imagenes > img {
  border: 3px solid blue;
} 

#pseudoclase-child .imagenes img:nth-of-type(2) {
  border: 3px solid green;
}

#pseudoclase-child .imagenes img:nth-child(4) {
  border: 3px solid fuchsia;
}

#pseudoclase-child .imagenes :last-child {
  border: 3px solid black;
}

pseudoclases.html

<div id="pseudoclase-focus">
  <h3>Estilos para elemento enfocado (:focus)</h3>
  <form>
    <div>
      <label for="nombre">Nombre</label>
      <input name="nombre" type="text">
    </div>
    <div>
      <label for="apellido">Apellido</label>
      <input name="apellido" type="text">
    </div>    
    <div>
      <label for="email">E-mail</label>
      <input name="email" type="email">
    </div>    
  </form>
</div>

<div id="pseudoclase-hover">
  <h3>Estilos para elemento con mouse encima (:hover)</h3>
  <button>Comprar</button>
  <button class="boton">Comprar</button>
</div>

<div id="pseudoclase-empty">
  <h3>Estilos para elemento vacío (:empty)</h3>
  <ul class="lista-tareas"></ul>
</div>

<div id="pseudoclase-child">
  <h3>Estilos para primer, último y enésimo descendiente (:first-child)</h3>
  <div class="imagenes">
    <p>Fotos</p>
    <img src="https://placehold.it/100x100">
    <img src="https://placehold.it/100x100">
    <img src="https://placehold.it/100x100">
    <img src="https://placehold.it/100x100">
    <p>Último elemento</p>
  </div>
</div>