vagacode

Una pseudo-clase nos permiten distinguir entre los diferentes tipos de etiquetas en función de alguna de sus características.

Un pseudo-elemento es algo que se ve en la página pero que no es parte de ella (no existe en el DOM).

En ambos casos, la sintaxis es sencilla; las pseudo-clases se identifican con un carácter : y los pseudo-elementos con dos :: aunque en la práctica, esta regla es bastante relativa porque los navegadores interpretan ambas.

Estas definiciones pueden sonar confusas pero en realidad, cualquiera que haya experimentado un poco con HTML y CSS seguramente ya las ha utilizado muchas veces sin darse cuenta. Por ejemplo, las pseudo-clases que utilizamos en los enlaces:

a {color: red;} /* los enlaces se muestran de color rojo */
a:link {color: white;} /* son blancos si no los hemos visitado */
a:visited {color: green;} /* son verdes si ya los visitamos */
a:hover {color: yellow;} /* son amarillo si colocamos el puntero del ratón encima */
a:active {color: blue;} /* son azules cuando están activos */

Resumiendo, una pseudo-clase permite seleccionar un elemento HTML que se encuentra en un determinado estado.

Existen muchas pseudo-clases asociadas a las etiquetas de los formularios:

:checked identifica la etiqueta de tipo radio,, checkbox u option seleccionada
:default se utiliza para identificar el elemento por defecto dentro de un grupo
:disabled identifica las etiquetas que el usuario no puede seleccionar
:enabled identifica las etiquetas que el usuario puede seleccionar
:focus se aplica a los elementos que activamos usando el teclado o el ratón
:in-range el valor seleccionado está dentro del rango especificado
:indeterminate simiilar a :invalid identifica etiquetas cuyo contenido no se considere válido
:optional identifica las etiquetas que no poseen un atributo required
:out-of-range el valor seleccionado está fuera del rango especificado
:read-only identifica las etiquetas que poseen un atributo readonly
:read-write identifica las etiquetas que no poseen un atributo readonly
:required identifica las etiquetas que poseen un atributo required
:valid identifica las etiquetas cuyo contenido ingresado se considere válido

Otras son muy especificas como las que se utilizan para imprimir páginas, su lenguaje, etc:

:dir() identifica los elementos que poseen textos en cierta dirección
:first describe el estilo de la primera página impresa
:fullscreen identifica cualquier elemento que sea mostrado en el modo pantalla completa
:lang() identifica los elementos basándose en un determinado idioma
:left describe el estilo de las página impresas impares
:right describe el estilo de las páginas impresas pares
:scope establece las reglas de una etiqueta style que tenga el atributo scoped

La lista continúa y puede ser abrumadora pero, según mi punto de vista, estas son las más interesantes y merecen ser descritas de modo más detallado; por ahora, sólo las enumero:

:any permite crear grupos de selectores
:empty selecciona un elemento siempre que este no contenga elementos internos
:first-child selecciona el primer elemento que se encuentra dentro de otro
:first-of-type selecciona al primer elemento de su tipo dentro de otro
:last-child selecciona el último elemento que se encuentra dentro de otro
:last-of-type selecciona el último elemento de su tipo
:not() exclute ciertos elementos
:nth-child() selecciona un elemento dependiendo del orden en que se encuentra
:nth-last-child() selecciona un elemento dependiendo del orden inverso
:nth-last-of-type() selecciona un elemento de cierto tipo dependiendo del orden inverso
:nth-of-type() selecciona un elemento de cierto tipo dependiendo del orden en que se encuentra
:only-child selecciona un elemento que es el único dentro de otro
:only-of-type selecciona cualquier elemento que no tenga adyacente otro de su mismo tipo
:root selecciona el elemento raíz de la página
:target selecciona el elemento activo (atributo href de un enlace de tipo anchor

Por suerte, la cantidad de pseudo-elementos es mucho menor pero también merecen ser descritos uno por uno:

::after inserta contenido después de un elemento
::before inserta contenido antes de un elemento
::first-letter identifica la primera letra de un texto
::first-line identifica la primera línea de un texto
::placeholder identifica el texto de un atributo placeholder
::selection establece las propiedades cuando seleccionamos algún texto

Como cualquier otra regla CSS, las pseudo-clases pueden combinarse y agregar varias en una misma regla pero sólo puede haber un pseudo-elemento por regla y debe colocarse al final de ella:

p:first-child:not(.otraclase)
	color: red;
}
p:first-child::after {
	content: "texto final";
}