Manual de pseudoclases CSS

Pseudoclases de CSS

Las pseudoclases se utilizan para definir estados especiales de los elementos.

Por ejemplo, se puede usar para:

  • Establezca estilos cuando el usuario pasa el ratón sobre el elemento.
  • Establezca diferentes estilos para enlaces visitados y no visitados.
  • Establezca estilos cuando el elemento obtiene el foco.
  • Establezca estilos para elementos de formulario válidos/inválidos/obligatorios/opcionales.

La siguiente tabla muestra diferentes pseudoclases en CSS:

Pseudoclases Ejemplo Descripción del ejemplo
:active a:active Elija enlaces activos.
:any-link a:anylink Elija todos los elementos <a> o <area> con atributo href.
:auto-fill input:autofill Elija todos los elementos <input> con valores llenados automáticamente por el navegador.
:checked option:checked Coincide con todos los elementos <input> o <option> seleccionados.
:default input:default Elija el elemento de formulario predeterminado en un grupo de elementos relacionados.
:defined :defined Elija todos los elementos definidos (elementos estándar o personalizados).
:dir() :dir(rtl) Elija todos los elementos con una dirección de texto especificada.
:disabled option:disabled Elija todos los elementos deshabilitados, comúnmente utilizados en elementos de formulario.
:empty div:empty Elija todos los elementos sin elementos hijos (incluidos los nodos de texto).
:enabled input:enabled Elija todos los elementos activados, a menudo utilizados en elementos de formulario.
:first @page :first Representa la primera página del documento de impresión (usado junto con la regla @page).
:first-child p:first-child Elija el elemento que es el primer hijo del elemento padre (en un grupo de hermanos).
:first-of-type li:first-of-type Elija el primer elemento de un grupo de hermanos de un tipo específico.
:focus select:focus Elija los elementos que tengan el foco, a menudo utilizados en elementos de formulario.
:focus-visible button:focus-visible Elija los elementos que tengan el foco (aplica estilos de foco solo cuando se enfoca a través del teclado, no del ratón).
:focus-within form:focus-within Coincide con los elementos o cualquier descendiente de los elementos que tengan el foco.
:fullscreen :fullscreen Elija los elementos que estén en modo de pantalla completa.
:has() h2:has(+p) Elija el elemento <h2> que sigue inmediatamente después del elemento <p>, y aplique estilos al <h2>.
:hover a:hover Elija los elementos sobre los que se esté suspendiendo el ratón.
:in-range input:in-range Elija los elementos <input> con un valor dentro del rango especificado.
:indeterminate input:indeterminate Elija los elementos de formulario en estado indeterminado.
:invalid input:invalid Elija los elementos de formulario no válidos.
:is() :is(ul, ol) Seleccione todos los elementos <ul> y <ol>.
:lang() p:lang(it) Elija los elementos <p> con el atributo lang como "it" (italiano).
:last-child li:last-child Elija el elemento <li> que es el último hijo del elemento padre.
:last-of-type p:last-of-type Elija el elemento <p> que es el último <p> del elemento padre.
:left @page :left Representa todas las páginas izquierdas del documento de impresión (usado junto con la regla @page).
:link a:link Elija todos los enlaces no visitados.
:modal :modal Elija los elementos que estén en estado modal.
:not() :not(p) Elija todos los elementos que no sean elementos <p>.
:nth-child() p:nth-child(2) Elija el elemento <p> que es el segundo hijo del elemento padre.
:nth-last-child() p:nth-last-child(2) Seleccionar elementos <p> que son el segundo hijo más reciente de su elemento padre.
:nth-last-of-type() p:nth-last-of-type(2) Seleccionar elementos <p> que son el segundo hijo más reciente de su elemento padre.
:nth-of-type() p:nth-of-type(2) Seleccionar elementos <p> que son el segundo <p> de su elemento padre.
:only-child p:only-child Seleccionar elementos <p> que son el único hijo de su elemento padre.
:only-of-type p:only-of-type Seleccionar elementos <p> que son la única <p> de tipo único de su elemento padre.
:optional textarea:optional Seleccionar elementos <input>, <select> o <textarea> sin la propiedad required.
:out-of-range input:out-of-range Seleccionar elementos <input> cuyos valores estén fuera del rango especificado.
:placeholder-shown input:placeholder-shown Seleccionar elementos <input> o <textarea> que muestren texto de marcador de posición actual.
:popover-open :popover-open Seleccionar elementos en estado de mostrar popup.
:read-only input:read-only Seleccionar elementos de entrada con la propiedad readonly.
:read-write input:read-write Seleccionar elementos de entrada editables.
:required input:required Seleccionar elementos de entrada con la propiedad required.
:right @page :right Representa todas las páginas laterales derechas del documento (usado junto con la regla @page).
:root :root Seleccionar el elemento raíz del documento.
:scope :scope Seleccionar elementos que sirven como punto de referencia o rango para el selector.
:state() :state() Seleccionar elementos personalizados con un estado personalizado especificado.
:target :target Seleccionar el elemento objetivo activo.
:user-invalid :user-invalid Seleccionar elementos de formulario con valores inválidos (después de la interacción del usuario).
:user-valid :user-valid Seleccionar elementos de formulario con valores válidos (después de la interacción del usuario).
:valid input:valid Seleccionar todos los elementos de entrada con valores válidos.
:visited a:visited Seleccione todos los enlaces visitados.
:where() :where(ol, ul) Seleccione todos los elementos <ul> y <ol>.