Seudoclases

Podcast de CSS - 015: Pseudoclases

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

Una seudoclase te permite aplicar estilos en función de cambios de estado y 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 abordan en el módulo selectores, y en este módulo las analizaremos en mayor detalle.

A diferencia de los seudoelementos, para obtener más información en el módulo anterior, Las seudoclases se conectan a estados específicos en los que puede estar un elemento. en lugar de dar estilo general a las partes de ese elemento.

Estados interactivos

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

:hover

Navegadores compatibles

  • Chrome: 1.
  • Límite: 12.
  • Firefox: 1.
  • Safari: 2.

Origen

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

:active

Navegadores compatibles

  • Chrome: 1.
  • Límite: 12.
  • Firefox: 1.
  • Safari: 1.

Origen

Este estado se activa cuando un elemento interactúa activamente con él. como un clic, antes de que se libere. Si se utiliza un dispositivo apuntador, como un mouse, Este estado se da cuando comienza el clic, y aún no se ha lanzado.

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

Navegadores compatibles

  • Chrome: 1.
  • Límite: 12.
  • Firefox: 1.
  • Safari: 1.

Origen

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

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

Los elementos enfocables, como los botones, mostrará un anillo de enfoque cuando estén en foco, incluso cuando hagan clic en ellos. En este tipo de situación, el desarrollador aplicará el siguiente CSS:

button:focus {
    outline: none;
}

Este CSS quita el anillo de enfoque predeterminado del navegador cuando un elemento recibe el foco. 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, Sin embargo, no podrá realizar un seguimiento de dónde se encuentra actualmente el foco cuando use la tecla Tab. Con :focus-visible puedes presentar un estilo de foco cuando un elemento recibe el foco a través del teclado y, al mismo tiempo, se usa la regla outline: none para evitarlo cuando un dispositivo puntero interactúa con él.

button:focus {
    outline: none;
}

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

:target

Navegadores compatibles

  • Chrome: 1.
  • Límite: 12.
  • Firefox: 1.
  • Safari: 1.3.

Origen

La :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 si la URL contiene #content.

#content:target {
    background: yellow;
}

Esto es útil para resaltar áreas que podrían haberse vinculado específicamente como el contenido principal de un sitio web, mediante un vínculo de navegación.

Estados históricos

Navegadores compatibles

  • Chrome: 1.
  • Límite: 12.
  • Firefox: 1.
  • Safari: 1.

Origen

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

:visited

Puedes definir el estilo de un vínculo que el usuario ya visitó mediante el Pseudoclase :visited. Este es el estado opuesto a :link, pero tienes menos propiedades de CSS para usar por motivos de seguridad. Solo puedes aplicar estilos a color, background-color border-color, outline-color y el color de los SVG fill y stroke.

El orden es importante

Si defines un estilo :visited, Se puede anular con una seudoclase de vínculo con al menos la misma especificidad. Por este motivo, te recomendamos que uses la regla LVHA para definir el estilo de los vínculos con pseudoclases en un orden particular: :link, :visited, :hover y :active.

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

Estados del formulario

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

:disabled y :enabled

Navegadores compatibles

  • Chrome: 1.
  • Límite: 12.
  • Firefox: 1.
  • Safari: 3.1.

Origen

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

:checked y :indeterminate

Navegadores compatibles

  • Chrome: 1.
  • Límite: 12.
  • Firefox: 1.
  • Safari: 3.1.

Origen

La :checked está disponible cuando un elemento de formulario complementario, como una casilla de verificación o un botón de selección, está marcado.

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 :indeterminate.

Un ejemplo de este estado es cuando tienes una opción que marca todas las casillas de verificación de un grupo. Si el usuario debe desmarcar una de estas casillas de verificación, la casilla de verificación raíz ya no representaría "all" que se está verificando, por lo que se debería 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 una apariencia a rayas para indicar que se desconoce cuánto más se necesita.

:placeholder-shown

Navegadores compatibles

  • Chrome: 47.
  • Borde: 79.
  • Firefox: 51.
  • Safari: 9.

Origen

Si un campo del formulario tiene un atributo placeholder y sin valor, ocurrirá lo siguiente: :placeholder-shown se puede usar para adjuntar estilos a ese estado. Tan pronto como hay contenido en el campo, ya sea que tenga un placeholder o no, este estado dejará de aplicarse.

Estados de validación

Navegadores compatibles

  • Chrome: 10.
  • Límite: 12.
  • Firefox: 4.
  • Safari: 5.

Origen

Puedes responder a la validación del formulario HTML con pseudoclases, como :valid: :invalid y :in-range Las seudoclases :valid y :invalid son útiles para los contextos. como un campo de correo electrónico con un pattern que debe coincidir. para que sea un campo válido. Este estado de valor válido se puede mostrar al usuario, y ayudarlos a entender que pueden avanzar con seguridad al próximo campo.

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

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

Selección de elementos por su índice, orden y casos

Hay un grupo de pseudoclases que seleccionan elementos en función de dónde se encuentran en el documento.

:first-child y :last-child

Navegadores compatibles

  • Chrome: 4.
  • Límite: 12.
  • Firefox: 3.
  • Safari: 3.1.

Origen

Si quieres encontrar el primer o el último elemento, puedes usar :first-child y :last-child Estas seudoclases devolverán el primer o el último elemento de un grupo de elementos del mismo nivel.

:only-child

Navegadores compatibles

  • Chrome: 2.
  • Límite: 12.
  • Firefox: 1.5
  • Safari: 3.1.

Origen

También puedes seleccionar elementos que no tengan hermanos, con el Pseudoclase :only-child.

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

Navegadores compatibles

  • Chrome: 1.
  • Límite: 12.
  • Firefox: 3.5
  • Safari: 3.1.

Origen

Puedes seleccionar :first-of-type y :last-of-type, que al principio, parecen que hacen lo mismo que :first-child y :last-child, pero ten en cuenta este 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;
}

Ningún elemento se mostrará en rojo porque el primer elemento secundario es un párrafo y no un div. La seudoclase :first-of-type es útil en este contexto.

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

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

:nth-child y :nth-of-type

Navegadores compatibles

  • Chrome: 1.
  • Límite: 12.
  • Firefox: 3.5
  • Safari: 3.1.

Origen

Tampoco está limitado al primer y último elemento secundario y tipo. El :nth-child y :nth-of-type las seudoclases te permiten especificar un elemento que está en un índice determinado. La indexación en los selectores CSS comienza en 1.

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

También puedes crear selectores más complejos que encuentren elementos a intervalos espaciados con regularidad, mediante la microsintaxis An + B.

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

Este selector elige cada tercer elemento, a partir del punto 3. El n en esta expresión es el índice, que comienza en cero, el 3 (3n) representa el resultado de multiplicar 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 se incrementó a 1, es decir, (3 * 1) + 3). Esta expresión funciona para :nth-child y :nth-of-type.

Puedes probar este tipo de selector en esta nth-child verificador o esto herramienta de selección de cantidad.

:only-of-type

Navegadores compatibles

  • Chrome: 1.
  • Límite: 12.
  • Firefox: 3.5
  • Safari: 3.1.

Origen

Por último, pueden encontrar el único elemento de un tipo determinado en un grupo de 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 en un párrafo.

Cómo buscar elementos vacíos

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

:empty

Navegadores compatibles

  • Chrome: 1.
  • Límite: 12.
  • Firefox: 1.
  • Safari: 3.1.

Origen

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

<div>
</div>

Esto se debe a que hay un espacio en blanco entre la <div> de apertura y la de cierre. tan vacías no funcionará.

La seudoclase :empty puede ser útil si tienes poco control sobre el HTML y quieres ocultar los elementos vacíos. como un editor de contenido WYSIWYG. Aquí, un editor agregó un párrafo suelto 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 eso y ocultarlo.

.post :empty {
    display: none;
}

Cómo buscar y excluir varios elementos

Algunas seudoclases ayudan a escribir CSS más compactas.

:is()

Navegadores compatibles

  • Chrome: 88.
  • Borde: 88.
  • Firefox: 78.
  • Safari: 14.

Origen

Si quieres encontrar todos los elementos secundarios h2, li y img en un elemento .post, haz lo siguiente: podrías pensar en escribir una lista de selección como la siguiente:

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

Con el :is() puedes escribir una versión más compacta:

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

La seudoclase :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 compatible en una lista de selectores toda la lista del selector ya no funcionará. Si hay un error en los selectores pasados en una seudoclase :is, ignorará el selector no válido, pero usará los que sean válidos.

:not()

Navegadores compatibles

  • Chrome: 1.
  • Límite: 12.
  • Firefox: 1.
  • Safari: 3.1.

Origen

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

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

Una seudoclase :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 podrías escribir una regla de CSS que agregue un contorno grueso y rojo a las imágenes no válidas:

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

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre las pseudoclases

Las pseudoclases actúan como si una clase se aplicara dinámicamente a un elemento, mientras que los pseudoelementos actúan sobre un elemento en sí.

Verdadero
Observa el uso de un : único o doble como carácter distintivo clave en el selector
Falso
Los seudoelementos son para las partes, mientras que las seudoclases son para el estado.

¿Cuál de las siguientes es una seudoclase funcional?

:is()
🎉
:target
Las seudoclases funcionales tienen () después de ellas para indicar que aceptan parámetros.
:empty
Las seudoclases funcionales tienen () después de ellas para indicar que aceptan parámetros.
:not()
🎉

¿Cuáles de las siguientes seudoclases 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 son seudoclases de estado <form>?

:enabled
🎉
:fresh
Vuelve a intentarlo.
:indeterminate
🎉
:checked
🎉
:in-range
🎉
:loading
Vuelve a intentarlo.
:valid
🎉