Las pseudoclases son palabras claves que se utilizan para seleccionar elementos pero solo cuando algun evento les ocurre a ellos. Son muy utiles para asignarle un comportamiento determinado a un elemento si ocurre un evento en particular. Las pseudoclases tienen pseudoselectores que son los encargados de definir ante que comportamiento debe activarse el código. Su estructura es la siguiente:

selector:pseudoselector{

propiedad:valor}

Este es un ejemplo de código. Supongamos que queremos cambiar el color de un titulo cuando apoyamos el mouse en el

h1:hover{
	color:red;
}

A partir de ahora, cada vez que pasemos el mouse sobre el elemento h1, este cambiará de color a rojo.

Lista de pseudoselectores

Estos son los pseudoselectores mas utilizados

:active Se representa cuando el usuario esta apretando algo. Ej: para que el boton se vuelva rojo mientras lo aprieto debo utilizar este pseudoselector —> button:active{color:red}. Asi, el boton se volverá rojo mientras lo aprieto
:checked Solo aplicable a radios y checkboxes. Cuando el valor de este input es true, con este pseudoselector puedo darle un formato determinado.
:hover Cuando el puntero del mouse esta sobre el elemento, se produce el evento hover. Con este pseudoselector puedo asignarle un formato a ese evento
:visited Se refiere a un link que ha sido clickeado previamente. Por default se ve en violeta pero ese comportamiento puede cambiar.
:last-of-type Sirve para seleccionar el ultimo elemento seleccionado. Ej: tengo 5 inputs, para seleccionar solo el ultimo puedo utilizar input:last-of-type en lugar de agregarle una clase aparte.
:not Sirve para excluir elementos. Ej: quiero seleccionar todos los parrafos menos los que tienen como clase “jugadores” —> p:not(.jugadores)
:first-of-type Sirve para seleccionar el primer elemento seleccionado. Ej: tengo 5 secciones dentro de un main y quiero elegir la primera —> main > section:first-of-type
:nth-of-type(n) Sirve para seleccionar un elemento determinado de una lista de elementos iguales. Supongamos que quiero seleccionar el tercer elemento con la clase .title —> .title:nth-of-type(3);
:root Selecciona el elemento raiz del documento. En un html, el elemento raiz es <html>. Es decir que usar :root y usar un selector html es casi lo mismo, salvo que el :root tiene mas especificidad. Suele usarse para declarar variables.