Pseudo-clases y Elementos

Aprende a aplicar pseudoclases y pseudoelementos en CSS con ejemplos directos. Verás cómo estilizar estados con :focus, seleccionar elementos específicos con :first-child, :last-child y :nth-child(even), y cómo generar comillas con ::before y ::after sin tocar el HTML.

¿Cómo estilizar estados con pseudoclases de CSS?

Las pseudoclases permiten apuntar a estados específicos del DOM. Un caso típico es el estado :focus en un input: cuando recibe clic o foco del teclado, puedes cambiar su estilo sin crear clases adicionales.

¿Qué hace :focus y cómo aplicarlo?

• :focus estiliza el elemento enfocado.
• Útil para alinear el diseño con la guía visual del producto.
• Combina outline y background-color para dar feedback inmediato.

input:focus {
  outline: 2px solid #3498DB;
  background-color: #E8F4F8;
}

• Se aplica a todos los input cuando están en focus.
• outline no altera el layout y destaca el elemento activo.

¿Cómo seleccionar elementos específicos en listas y tablas?

Cuando necesitas estilos solo en el primer o último elemento de una lista, o alternar filas en una tabla, las pseudoclases evitan crear clases manuales. Esto hace los selectores más específicos y mantenibles.

¿Cómo aplicar :first-child y :last-child en listas?

• Apunta al primer y último hijo de una lista.
• Evita clases extra por elemento.

li:first-child {
  color: green;
  font-weight: bold;
}

li:last-child {
  color: red;
  font-weight: bold;
}

¿Para qué sirve :nth-child(even) en tablas?

• Alterna estilos por posición en filas de tabla.
• Escala a muchas filas sin añadir clases.

tr:nth-child(even) {
  background-color: gray;
}

• Puedes ajustar la regla a pares o a otras expresiones según necesidad.
• Útil cuando hay 4, 10 o 100 filas: la selección sigue siendo declarativa.

¿Cómo crear contenido con pseudoelementos sin tocar el HTML?

Los pseudoelementos generan contenido que no existe en el HTML. Con ::before y ::after puedes añadir comillas u otros detalles visuales directamente desde CSS usando la propiedad content.

¿Cómo usar ::before y ::after con content?

• ::before y ::after se escriben con doble dos puntos.
• content inserta el texto (por ejemplo, comillas) al inicio o al final.
• El estilo del contenido se controla como cualquier nodo: color, tamaño, etc.

.quotes::before {
  content: '"';
  color: blue;
  font-size: 24px;
}

.quotes::after {
  content: '"';
  color: blue;
  font-size: 24px;
}

• La clase .quotes envuelve el texto citado.
• En el inspector verás ::before y ::after como nodos generados por CSS, no como texto real en el HTML.

¿Te quedó alguna duda sobre estos selectores o quieres ver un caso real con tus propios componentes? Cuéntame en los comentarios y lo resolvemos juntos.