Mis apuntes de desarrollo web </>

Pseudo-clases

Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado. Las pseudoclases, permiten aplicar un estilo a un elemento no sólo en relación con el contenido del árbol de documento, sino también en relación a factores externos como el historial del navegador, el estado del contenido, o la posición del ratón.

pseudo-clases estándar
Tipo de pseudo-clase pseudo-clase Descripción Ejemplo
pseudo-clases de ratón :active Representa un elemento (como un botón) que el usuario está activando. Cuando se usa un mouse, la "activación" generalmente comienza cuando el usuario presiona el botón primario del mouse y termina cuando se suelta. La pseudo-clase :active se usa comúnmente en los elementos <a> y <button>, pero también se puede usar en otros elementos. click aqui
:hover Se activa cuando el usuario se desplaza sobre un elemento con el cursor. Enlace con hover, link, visited y active.
pseudo-clases de enlaces :link Representa un elemento <a> que aún no se ha visitado.
:visited Representa enlaces que el usuario ya ha visitado. Por motivos de privacidad, los estilos que se pueden modificar con este selector son muy limitados.
pseudo-clases de iteración :checked Representa cualquier radio, checkbox u option que está marcado o conmutado a un estado on.


:focus Representa un elemento (como una entrada de formulario) que ha recibido el foco. Generalmente se activa cuando el usuario hace clic, toca un elemento o lo selecciona con la tecla "Tab" del teclado.
pseudo-clases de habilitación :enabled Representa cualquier elemento habilitado. Un elemento está habilitado si puede ser activado o si accepta el foco.
:disabled Representa a cualquier elemento deshabilitado. Un elemento se encuentra deshabilitado si no puede ser activado ni aceptar el foco.
:read-only Representa un elemento que ya no es editable por el usuario.
:read-write Representa un elemento que es editable por el usuario.
pseudo-clases de validación :required Representa cualquier elemento input, select, o textarea que tenga el atributo required establecido en él.
:optional Representa cualquier elemento input, select, o textarea que no tenga el atributo required establecido en él.
:valid Representa cualquier elemento input u otro elemento form cuyo contenido se valide satisfactoriamente. Esto permite que los campos válidos adopten fácilmente una apariencia que ayuda al usuario a confirmar que sus datos están formateados correctamente.
:invalid Representa cualquier elemento input u otro elemento form cuyos contenidos no se puedan validar.
:in-range Representa un elemento input cuyo valor actual se encuentra dentro de los límites de rango especificados por los atributos min y max.
:out-of-range Representa un elemento input cuyo valor actual está fuera de los límites de rango especificados por los atributos min y max.
pseudo-clase de negación :not() Representa elementos que no coinciden con una lista de selectores. Como evita que se seleccionen elementos específicos, se lo conoce como la pseudoclase de negación.
pseudo-clases de posición y estructura de elementos hijos :first-child Representa el primer elemento entre un grupo de elementos hermanos.

soy el primer elemento hijo

soy el segundo elemento hijo (par)

soy el tercer elemento hijo (impar)

soy el cuarto elemento hijo (par)

soy el quinto elemento hijo (impar)

soy el último elemento hijo
:last-child Representa el último elemento entre un grupo de elementos hermanos.
:nth-child() Coincide con uno o más elementos en función de su posición entre un grupo de hermanos. se especifica con un único argumento, que representa el patrón para los elementos coincidentes.
nth-last-child() Selecciona uno o más elementos en función de su posición entre un grupo de hermanos, contando desde el final. Es esencialmente la misma que :nth-child, excepto que cuenta los elementos hacia atrás desde el final, no hacia adelante desde el principio.
pseudo-clases para elementos del mismo tipo :first-of-type Representa el primer elemento de su tipo entre un grupo de elementos hermanos.
  • primer li hijo
  • segundo li hijo
  • tercer li hijo
  • cuarto li hijo
  • quinto li hijo
  • último li hijo
:last-of-type Representa el último elemento de su tipo entre un grupo de elementos hermanos.
:nth-of-type() Selecciona uno o más elementos de un tipo dado, en función de su posición entre un grupo de hermanos.
:nth-last-of-type() Coincide con uno o más elementos de un tipo dado, en función de su posición entre un grupo de hermanos, contando desde el final. Es esencialmente la misma que :nth-of-type, excepto que cuenta los elementos hacia atrás desde el final, no hacia adelante desde el principio.
Otras pseudo-clases :default Representa cualquier elemento de formulario que sea el predeterminado entre un grupo de elementos relacionados. Este selector se puede usar en los elementos button, checkbox, radio y option.

:empty Representa cualquier elemento que no tenga hijos. Los hijos pueden ser nodos de elemento o texto (incluido el espacio en blanco).
:target Representa un elemento único (el elemento objetivo) con un id que coincide con el fragmento de la URL. Ejemplo al dar click en alguno de los enlaces.
Otras pseudo-clases

Pseudo-elementos

Al igual que las pseudo-classes, los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento.