Pseudoclases en CSS: Lo que Nadie Nos Explicó en el Grado Superior

En teoría, CSS debería ser simple, ¿no? Pues en la práctica, me encontré con que las pseudoclases son una de esas joyas ocultas que nunca nos explicaron bien. Y resulta que con ellas podrás darle mucha vida y reactividad a cualquier página. Así que aquí te tiro algunos ejemplos de pseudoclases que, honestamente, me hubiera encantado conocer antes.

1. hover, focus y active: La Santa Trinidad de la Interactividad

Estas tres pseudoclases son básicas, pero son las primeras que te hacen pensar "¡esto está bueno!". Te permiten controlar cómo se ven los elementos cuando el usuario interactúa con ellos.

Ejemplo

button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  transition: 0.3s;
}

button:hover {
  background-color: #2980b9; /* Cambio de color al pasar el ratón */
}

button:focus {
  outline: 3px solid #f39c12; /* Añadir borde al recibir foco */
}

button:active {
  transform: scale(0.95); /* Simula un "click" */
}

Con estas tres pseudoclases, el botón reacciona a lo que hace el usuario: cambia de color cuando lo tocas, resalta cuando recibe foco (ideal para accesibilidad), y se "achica" cuando lo presionas. ¡Es todo un game-changer para los botones y enlaces!

2. Negación con not para Excluir Elementos sin complicarte la vida

La pseudoclase

:not()

Ejemplo

input:not([type="submit"]) {
  background-color: #ecf0f1;
  border: 1px solid #bdc3c7;
  padding: 8px;
  border-radius: 4px;
}

Aquí estamos estilizando todos los input excepto los de tipo submit. Súper útil cuando quieres un mismo estilo para muchos inputs pero tienes alguno que quieres mantener diferente.

3. Dale Vidilla a tus Formularios con checked.

Esta pseudoclase es perfecta para personalizar elementos que el usuario selecciona, como checkboxes y radios. Puedes hacer que tus formularios se vean más dinámicos y personalizados.

Ejemplo

input[type="checkbox"]:checked + label {
  color: #27ae60;
  font-weight: bold;
}

Con esto, cada vez que un checkbox esté marcado, el texto del label se pondrá verde y en negrita. Esos pequeños detalles que hacen que el formulario se vea mejor y más profesional.

4. Primero, último y el que esté solo: Control Absoluto

Estas pseudoclases son súper prácticas para aplicar estilos a elementos que cumplen posiciones específicas dentro de su contenedor.

Ejemplo

ul li:first-child {
  font-weight: bold; /* El primer elemento en negrita */
}

ul li:last-child {
  font-style: italic; /* El último elemento en cursiva */
}

ul li:only-child {
  color: #e67e22; /* Si solo hay un elemento en la lista */
}

Con estas pseudoclases puedes hacer que el primer, último, o único elemento de un contenedor se vea diferente. Perfecto para listas de navegación o menús.

6. Simplifica Selectores Complejos con :is()

:is() es una pseudoclase súper útil que permite agrupar selectores para aplicar estilos comunes a varios elementos, manteniendo el CSS más limpio y legible. Básicamente, te permite simplificar selectores complejos, evitando escribir combinaciones repetitivas.

Ejemplo

:is(h1, h2, h3, h4) {
  color: #2c3e50; /* Aplica este color a todos los encabezados h1, h2, h3 y h4 */
  margin-bottom: 1em;
}

.container :is(p, li) {
  font-size: 1.1em; /* Cambia el tamaño de fuente para párrafos y listas dentro de .container */
}

Con :is(), el CSS es mucho más limpio. En este ejemplo, aplicamos el mismo color a varios encabezados sin tener que repetirlos. Y con el segundo selector, hacemos que los p y li dentro de .container tengan el mismo tamaño de fuente. Es una forma de escribir menos y lograr más.

7. :has(): Selecciona Elementos Basados en sus Hijos

:has() es una pseudoclase "next level". Con :has(), puedes seleccionar un elemento que contiene otro específico. Esta pseudoclase es casi como tener selectores de "padre" en CSS, algo que nos faltaba y que ahora nos permite estilos súper dinámicos.

Nota: Actualmente :has() es compatible con los navegadores modernos como Chrome y Safari, pero todavía no en Firefox. Sin embargo, es tan poderosa que vale la pena probarla.

Ejemplo

.card:has(img) {
  padding: 20px;
  background-color: #f9f9f9; /* Agrega un fondo especial si la tarjeta tiene una imagen */
}

form:has(input:invalid) {
  border: 2px solid #e74c3c; /* Cambia el borde del formulario si tiene un campo inválido */
}

.container:has(.highlight) {
  border: 2px solid #3498db; /* Aplica un borde si dentro de .container hay un elemento con la clase .highlight */
}

En estos ejemplos, :has() permite aplicar estilos al elemento contenedor dependiendo de lo que hay dentro. Así, la tarjeta .card solo recibe un fondo especial si contiene una imagen, y el form cambia de estilo si tiene un campo inválido. En el último ejemplo, .container recibe un borde si contiene un elemento .highlight. Es como CSS condicional, y las posibilidades son infinitas.