Pseudo-clases/elements útiles

En Tailwind CSS, las clases invalid, required y disabled se utilizan para aplicar estilos a los elementos del formulario según su estado.

invalid:

Se usa para aplicar estilos a un elemento cuando su valor no es válido según las reglas de validación del navegador.

Ejemplo:

<input type="email" class="invalid:border-red-500">

Explicación: Si el valor ingresado en el campo no es un correo electrónico válido, la clase invalid cambiará el borde del campo a rojo (border-red-500).

required:

Esta clase aplica estilos a un campo de formulario marcado como obligatorio (usando el atributo required).

Ejemplo:

<input type="text" required class="required:border-blue-500">

Explicación: Si el campo es obligatorio (tiene el atributo required), se aplicará un borde azul (border-blue-500) al campo.

disabled:

Se usa para aplicar estilos a un elemento que está deshabilitado (disabled).

Ejemplo:

<button disabled class="disabled:bg-gray-400">
  Enviar
</button>

Explicación: Si el botón está deshabilitado (disabled), la clase disabled:bg-gray-400 cambiará su fondo a un gris claro.

peer:

La clase peer se utiliza en el elemento hermano y luego se pueden usar clases como peer-checked, peer-focus, etc., en otros elementos relacionados, para modificar sus estilos dependiendo del estado de ese hermano.

Ejemplo:

Supongamos que quieres cambiar el borde de un input cuando un checkbox está marcado:

<div>
  <input type="checkbox" id="toggle" class="peer">
  <input type="text" class="peer-checked:border-green-500">
</div>

Explicación:

• peer se aplica al checkbox.
• peer-checked:border-green-500 en el campo de texto cambia su borde a verde (border-green-500) cuando el checkbox está marcado (es decir, cuando está «checked»).

has:

La clase has se utiliza para aplicar estilos a un elemento padre cuando contiene un hijo que cumple con una condición específica. Esta clase es muy útil cuando quieres estilizar el elemento padre en función de los estados de los elementos hijos.

Ejemplo de has:

Supongamos que quieres cambiar el color de fondo de un contenedor si contiene un campo de texto con un valor.

<div class="has-[input:focus-within]:bg-yellow-100">
  <input type="text" class="focus:outline-none">
</div>

not:

La clase not se utiliza para aplicar estilos a un elemento que no cumple con una condición específica. Es útil para hacer cambios cuando el estado de un elemento no es el deseado.

Ejemplo de not:

Si quieres cambiar el color de fondo de un contenedor si el input no tiene un valor:

<div class="not-[input:valid]:bg-red-100">
  <input type="email" class="border p-2">
</div>

:first:

La pseudoclase :first se aplica al primer elemento dentro de un contenedor o lista. Esto es útil cuando deseas aplicar un estilo único al primer elemento de un grupo.

Ejemplo de :first:

<ul>
  <li class="first:text-blue-500">Primer elemento</li>
  <li>Segundo elemento</li>
  <li>Tercer elemento</li>
</ul>

Explicación:

• first:text-blue-500 cambiará el color del texto del primer <li> a azul (text-blue-500).

:last:

La pseudoclase :last se aplica al último elemento dentro de un contenedor o lista. Es útil para dar un estilo especial al último elemento.

Ejemplo de :last:

<ul>
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
  <li class="last:text-red-500">Último elemento</li>
</ul>

Explicación:

• last:text-red-500 cambiará el color del texto del último <li> a rojo (text-red-500).

:odd:

La pseudoclase :odd se aplica a los elementos con índice impar (1, 3, 5, etc.) dentro de un contenedor. Es útil para aplicar estilos alternados a los elementos impares.

Ejemplo de :odd:

<ul>
  <li class="odd:bg-gray-200">Elemento 1</li>
  <li>Elemento 2</li>
  <li class="odd:bg-gray-200">Elemento 3</li>
  <li>Elemento 4</li>
</ul>

Explicación:

• odd:bg-gray-200 aplicará un fondo gris claro (bg-gray-200) a los elementos con índices impares (1, 3, …).

:even:

La pseudoclase :even se aplica a los elementos con índice par (0, 2, 4, etc.) dentro de un contenedor. Esto es útil para estilizar elementos alternados de forma diferente.

Ejemplo de :even:

<ul>
  <li class="even:bg-blue-200">Elemento 1</li>
  <li>Elemento 2</li>
  <li class="even:bg-blue-200">Elemento 3</li>
  <li>Elemento 4</li>
</ul>

Explicación:

• even:bg-blue-200 aplicará un fondo azul claro (bg-blue-200) a los elementos con índices pares (0, 2, …).

before y after:

Las pseudoclases :before y :after se usan para insertar contenido antes o después de un elemento, respectivamente. Se utilizan con las clases before: y after: en Tailwind CSS.

Ejemplo de before y after:

<div class="before:content-['🚀'] after:content-['✅']">
  Texto
</div>

Explicación:

• before:content-['🚀'] agrega un emoji de cohete antes del contenido.
• after:content-['✅'] agrega un emoji de verificación después del contenido.

placeholder:

La pseudoclase placeholder se utiliza para aplicar estilos al texto del placeholder de un input o textarea.

Ejemplo de placeholder:

<input type="text" placeholder="Escribe aquí..." class="placeholder:text-gray-500">

Explicación:

• placeholder:text-gray-500 cambia el color del texto del placeholder a gris (text-gray-500).

file:

La pseudoclase file se aplica a los inputs de tipo archivo (<input type="file">). Se utiliza para personalizar la apariencia de los botones de carga de archivos.

Ejemplo de file:

<input type="file" class="file:border file:px-4 file:py-2 file:bg-blue-500">

Explicación:

• file:border aplica un borde al botón de carga.
• file:px-4 y file:py-2 añaden padding horizontal y vertical.
• file:bg-blue-500 cambia el color de fondo a azul (bg-blue-500).

marker:

La pseudoclase marker se utiliza para estilizar el marcador de listas (los puntos o números en una lista ordenada o desordenada).

Ejemplo de marker:

<ul class="marker:text-red-500">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

Explicación:

• marker:text-red-500 cambia el color del marcador (el punto de la lista) a rojo (text-red-500).

selection:

La pseudoclase selection se utiliza para aplicar estilos al texto seleccionado (por ejemplo, cuando el usuario resalta texto).

Ejemplo de selection:

<p class="selection:bg-yellow-300 selection:text-red-500">
  Este es un texto de ejemplo.
</p>

Explicación:

• selection:bg-yellow-300 cambia el fondo del texto seleccionado a amarillo.
• selection:text-red-500 cambia el color del texto seleccionado a rojo.

first-line:

La pseudoclase first-line se aplica al primer renglón de un bloque de texto. Es útil para dar formato especial a la primera línea de un párrafo.

Ejemplo de first-line:

<p class="first-line:text-lg first-line:font-bold">
  Este es un párrafo de ejemplo. La primera línea tiene un tamaño de fuente mayor y en negrita.
</p>

Explicación:

• first-line:text-lg cambia el tamaño de fuente de la primera línea a text-lg.
• first-line:font-bold aplica negrita solo a la primera línea.

first-letter:

La pseudoclase first-letter se aplica a la primera letra de un bloque de texto.

Ejemplo de first-letter:

<p class="first-letter:text-4xl first-letter:font-bold">
  Este es un párrafo de ejemplo. La primera letra es más grande y en negrita.
</p>

Explicación:

• first-letter:text-4xl cambia el tamaño de la primera letra a text-4xl.
• first-letter:font-bold hace que la primera letra sea en negrita.

backdrop:

La pseudoclase backdrop se utiliza para aplicar estilos a un elemento de fondo detrás de un elemento con el modo backdrop-filter (usado con elementos que tienen fondos difusos o de color).

Ejemplo de backdrop:

<div class="backdrop-blur-lg backdrop-brightness-50">
  Contenido con fondo difuso y brillo.
</div>

Explicación:

• backdrop-blur-lg aplica un desenfoque grande al fondo del elemento.
• backdrop-brightness-50 ajusta el brillo del fondo al 50%.