Seudoclases

The CSS Podcast - 015: Pseudo-classes

Supongamos que tienes un formulario de registro por correo electrónico y quieres que el campo del formulario tenga un borde rojo si contiene una dirección de correo electrónico no válida. ¿Cómo puede hacerlo? Puedes usar una pseudoclase :invalid CSS, que es una de las muchas pseudoclases que proporciona el navegador.

Una pseudoclase te permite aplicar estilos según los cambios de estado y los factores externos. Esto significa que tu diseño puede reaccionar a las entradas del usuario, como una dirección de correo electrónico no válida. Estos se tratan en el módulo Selectores, que te explicará con más detalle.

A diferencia de los pseudoelementos, sobre los que puedes obtener más información en el módulo anterior, las pseudoclases se conectan a estados específicos en los que puede estar un elemento, en lugar de aplicar diseño a partes de ese elemento de forma general.

Estados interactivos

Las siguientes pseudoclases se aplican debido a una interacción que un usuario tiene con tu página.

:hover

Browser Support

• 1
• 12
• 1
• 2

Source

Si un usuario tiene un dispositivo apuntador, como un mouse o un panel táctil, y lo coloca sobre un elemento, puedes conectarte a ese estado con :hover para aplicar estilos. Esta es una forma útil de sugerir que se puede interactuar con un elemento.

:active

Browser Support

• 1
• 12
• 1
• 1

Source

Este estado se activa cuando se interactúa de forma activa con un elemento, como un clic, antes de que se suelte. Si se usa un dispositivo de puntero, como un mouse, este estado es cuando comienza el clic y aún no se suelta.

:focus, :focus-within y :focus-visible

Browser Support

• 1
• 12
• 1
• 1

Source

Si un elemento puede recibir enfoque, como un <button>, puedes reaccionar a ese estado con la pseudoclase :focus.

También puedes reaccionar si un elemento secundario de tu elemento recibe enfoque con :focus-within.

Los elementos que se pueden enfocar, como los botones, mostrarán un anillo de enfoque cuando estén enfocados, incluso cuando se haga clic en ellos. En este tipo de situación, un desarrollador aplicará el siguiente CSS:

button:focus {
    outline: none;
}

Este CSS quita el anillo de enfoque predeterminado del navegador cuando un elemento recibe el enfoque, lo que presenta un problema de accesibilidad para los usuarios que navegan por una página web con un teclado. Si no hay un estilo de enfoque, no podrán hacer un seguimiento de dónde está el enfoque actualmente cuando usen la tecla Tab. Con :focus-visible, puedes presentar un estilo de enfoque cuando un elemento recibe enfoque a través del teclado y, al mismo tiempo, usar la regla outline: none para evitarlo cuando un dispositivo de puntero interactúa con él.

button:focus {
    outline: none;
}

button:focus-visible {
    outline: 1px solid black;
}

:target

Browser Support

• 1
• 12
• 1
• 1.3

Source

La pseudoclase :target selecciona un elemento que tiene un id que coincide con un fragmento de URL. Supongamos que tienes el siguiente código HTML:

<article id="content">
    …
</article>

Puedes adjuntar estilos a ese elemento cuando la URL contiene #content.

#content:target {
    background: yellow;
}

Esto es útil para destacar áreas a las que se podría haber vinculado específicamente, como el contenido principal de un sitio web, a través de un vínculo de omisión.

Estados históricos

:link

Browser Support

• 1
• 12
• 1
• 1

Source

La pseudoclase :link se puede aplicar a cualquier elemento <a> que tenga un valor href que aún no se haya visitado.

:visited

Puedes aplicar diseño a un vínculo que el usuario ya visitó con la pseudoclase :visited. Este es el estado opuesto a :link, pero tienes menos propiedades CSS para usar por razones de seguridad. Solo puedes aplicar diseño a color, background-color, border-color, outline-color y el color de SVG fill y stroke.

El orden es importante

Si defines un estilo :visited, una pseudoclase de vínculo con al menos la misma especificidad puede anularlo. Por este motivo, se recomienda que uses la regla LVHA para aplicar diseño a los vínculos con pseudoclases en un orden particular: :link, :visited, :hover, :active.

a:link {}
a:visited {}
a:hover {}
a:active {}

Nota: Por motivos de seguridad, solo puedes cambiar los estilos definidos por un estado :link o no visitado con la pseudoclase :visited, por lo que es importante que primero definas los estilos que se pueden cambiar. Seguir la regla de LVHA te ayudará con eso.

Estados del formulario

Las siguientes pseudoclases pueden seleccionar elementos de formulario, en los diversos estados en los que estos elementos pueden estar durante la interacción con ellos.

:disabled y :enabled

Browser Support

• 1
• 12
• 1
• 3.1

Source

Si el navegador inhabilita un elemento de formulario, como un <button>, puedes conectarte a ese estado con la pseudoclase :disabled. La pseudoclase :enabled está disponible para el estado opuesto, aunque los elementos de formulario también son :enabled de forma predeterminada, por lo que es posible que no necesites usar esta pseudoclase.

:checked y :indeterminate

Browser Support

• 1
• 12
• 1
• 3.1

Source

La pseudoclase :checked está disponible cuando un elemento de formulario compatible, como una casilla de verificación o un botón de selección, está en estado de verificación.

El estado :checked es un estado binario(verdadero o falso), pero las casillas de verificación tienen un estado intermedio cuando no están marcadas ni desmarcadas. Esto se conoce como el estado :indeterminate.

Un ejemplo de este estado es cuando tienes un control "Seleccionar todo" que marca todas las casillas de verificación de un grupo. Si el usuario desmarcara una de estas casillas de verificación, la casilla de verificación raíz ya no representaría que se está verificando “todo”, por lo que se debe colocar en un estado indeterminado.

El elemento <progress> también tiene un estado indeterminado al que se le puede aplicar diseño. Un caso de uso común es darle un aspecto a rayas para indicar que se desconoce cuánto más se necesita.

:placeholder-shown

Browser Support

• 47
• 79
• 51
• 9

Source

Si un campo de formulario tiene un atributo placeholder y no tiene un valor, se puede usar la pseudoclase :placeholder-shown para adjuntar estilos a ese estado. En cuanto haya contenido en el campo, ya sea que tenga un placeholder o no, ya no se aplicará este estado.

Estados de validación

Browser Support

• 10
• 12
• 4
• 5

Source

Puedes responder a la validación de formularios HTML con pseudoclases, como :valid, :invalid y :in-range. Las pseudoclases :valid y :invalid son útiles para contextos como un campo de correo electrónico que tiene un pattern que debe coincidir para que sea un campo válido. Este estado de valor válido se puede mostrar al usuario para ayudarlo a comprender que puede avanzar con seguridad al siguiente campo.

La pseudoclase :in-range está disponible si una entrada tiene un min y un max, como una entrada numérica y el valor está dentro de esos límites.

Con los formularios HTML, puedes determinar que un campo es obligatorio con el atributo required. La pseudoclase :required estará disponible para los campos obligatorios. Los campos que no son obligatorios se pueden seleccionar con la pseudoclase :optional.

Nota: No es una buena idea depender únicamente del color para indicar cambios de estado, en especial, rojo y verde, ya que los usuarios con daltonismo y baja visión pueden tener dificultades para ver un cambio de estado o incluso pasarlo por alto. Una buena idea es usar el color para admitir cambios de estado, junto con cambios de texto y de íconos para indicar visualmente el cambio.

Cómo seleccionar elementos por su índice, orden y ocurrencia

Hay un grupo de pseudoclases que seleccionan elementos según su ubicación en el documento.

:first-child y :last-child

Browser Support

• 4
• 12
• 3
• 3.1

Source

Si quieres encontrar el primer o último elemento, puedes usar :first-child y :last-child. Estas pseudoclases mostrarán el primer o el último elemento de un grupo de elementos hermanos.

:only-child

Browser Support

• 2
• 12
• 1.5
• 3.1

Source

También puedes seleccionar elementos que no tengan elementos hermanos con la pseudoclase :only-child.

:first-of-type y :last-of-type

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

Puedes seleccionar :first-of-type y :last-of-type, que, en un principio, parecen hacer lo mismo que :first-child y :last-child, pero considera este código HTML:

<div class="my-parent">
    <p>A paragraph</p>
    <div>A div</div>
    <div>Another div</div>
</div>

Y este CSS:

.my-parent div:first-child {
    color: red;
}

No se colorearía ningún elemento de rojo porque el primer elemento secundario es un párrafo y no un div. La pseudoclase :first-of-type es útil en este contexto.

.my-parent div:first-of-type {
    color: red;
}

Aunque el primer <div> es el segundo secundario, sigue siendo el primero de tipo dentro del elemento .my-parent, por lo que, con esta regla, tendrá el color rojo.

:nth-child y :nth-of-type

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

Tampoco estás limitado a los primeros y últimos elementos secundarios y tipos. Las pseudoclases :nth-child y :nth-of-type te permiten especificar un elemento que se encuentra en un índice determinado. El indexado en los selectores CSS comienza en 1.

También puedes pasar más de un índice a estas pseudoclases. Si quieres seleccionar todos los elementos pares, puedes usar :nth-child(even).

También puedes crear selectores más complejos que encuentren elementos en intervalos espaciados de forma regular con la microsintaxis An+B.

li:nth-child(3n+3) {
    background: yellow;
}

Este selector selecciona cada tercer elemento, comenzando por el elemento 3. El n en esta expresión es el índice, que comienza en cero. El 3 (3n) es la cantidad por la que multiplicas ese índice.

Supongamos que tienes 7 elementos <li>. El primer elemento que se selecciona es 3 porque 3n+3 se traduce a (3 * 0) + 3. La siguiente iteración elegiría el elemento 6 porque n ahora aumentó a 1, así que (3 * 1) + 3). Esta expresión funciona para :nth-child y :nth-of-type.

Puedes probar este tipo de selector en este probador de n-ésimo hijo o en esta herramienta de selector de cantidad.

:only-of-type

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

Por último, puedes encontrar el único elemento de un tipo determinado en un grupo de elementos hermanos con :only-of-type. Esto es útil si deseas seleccionar listas con un solo elemento o si quieres encontrar el único elemento en negrita de un párrafo.

Cómo encontrar elementos vacíos

A veces, puede ser útil identificar elementos completamente vacíos, y también hay una pseudoclase para eso.

:empty

Browser Support

• 1
• 12
• 1
• 3.1

Source

Si un elemento no tiene elementos secundarios, se le aplica la pseudoclase :empty. Sin embargo, los elementos secundarios no son solo elementos HTML o nodos de texto: también pueden ser espacios en blanco, lo que puede ser confuso cuando depuras el siguiente código HTML y te preguntas por qué no funciona con :empty:

<div>
</div>

El motivo es que hay espacios en blanco entre el <div> de apertura y el de cierre, por lo que el valor vacío no funcionará.

La pseudoclase :empty puede ser útil si tienes poco control sobre el código HTML y deseas ocultar elementos vacíos, como un editor de contenido WYSIWYG. Aquí, un editor agregó un párrafo erróneo y vacío.

<article class="post">
 <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
 <p></p>
 <p>Curabitur blandit tempus porttitor.</p>
</article>

Con :empty, puedes encontrar ese elemento y ocultarlo.

.post :empty {
    display: none;
}

Cómo buscar y excluir varios elementos

Algunas pseudoclases te ayudan a escribir CSS más compacto.

:is()

Browser Support

• 88
• 88
• 78
• 14

Source

Si deseas encontrar todos los elementos secundarios h2, li y img en un elemento .post, podrías escribir una lista de selectores como esta:

.post h2,
.post li,
.post img {
    …
}

Con la seudoclase :is(), puedes escribir una versión más compacta:

.post :is(h2, li, img) {
    …
}

La pseudoclase :is no solo es más compacta que una lista de selectores, sino que también es más tolerante. En la mayoría de los casos, si hay un error o un selector no admitido en una lista de selectores, toda la lista de selectores dejará de funcionar. Si hay un error en los selectores pasados en una seudoclase :is, se ignorará el selector no válido, pero se usarán los que sean válidos.

:not()

Browser Support

• 1
• 12
• 1
• 3.1

Source

También puedes excluir elementos con la pseudoclase :not(). Por ejemplo, puedes usarlo para aplicar diseño a todos los vínculos que no tengan un atributo class.

a:not([class]) {
    color: blue;
}

Una pseudoclase :not también puede ayudarte a mejorar la accesibilidad. Por ejemplo, un <img> debe tener un alt, incluso si es un valor vacío, así que puedes escribir una regla de CSS que agregue un contorno rojo grueso a las imágenes no válidas:

img:not([alt]) {
    outline: 10px red;
}

Verifica tu comprensión

Pon a prueba tus conocimientos sobre las pseudoclases

Las pseudoclases actúan como si se hubiera aplicado una clase de forma dinámica a un elemento, mientras que los pseudoelementos actúan sobre el elemento en sí.

Verdadero

Presta atención al uso de un : simple o doble como carácter distintivo clave en el selector.

Falso

Los pseudoelementos son para las partes, y las pseudoclases son para el estado.

¿Cuáles de las siguientes opciones son una pseudoclase funcional?

:is()

🎉

:target

Las pseudoclases funcionales tienen () después de ellas para indicar que aceptan parámetros.

:empty

Las pseudoclases funcionales tienen () después de ellas para indicar que aceptan parámetros.

:not()

🎉

¿Cuáles de las siguientes pseudoclases se deben a una interacción del usuario?

:hover

🎉

:press

Vuelve a intentarlo.

:squeeze

Vuelve a intentarlo.

:target

🎉

:focus-within

🎉

¿Cuáles de las siguientes opciones son pseudoclases de estado <form>?

:enabled

🎉

:fresh

Vuelve a intentarlo.

:indeterminate

🎉

:checked

🎉

:in-range

🎉

:loading

Vuelve a intentarlo.

:valid

🎉