CSS: La Guía Definitiva, 5ª Edición

Capítulo 3. Selectores de pseudoclase y -elemento

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

En el capítulo anterior, viste cómo los selectores pueden coincidir con un único elemento o con una colección de elementos, utilizando expresiones bastante sencillas que coinciden con atributos HTML del documento. Eso está muy bien si sólo necesitas aplicar estilo basándote en atributos, pero ¿y si necesitas aplicar estilo a parte de un documento basándote en su estado o estructura actual? ¿O si quieres seleccionar todos los elementos del formulario que están desactivados, o los que son necesarios para que se permita el envío del formulario? Para esas cosas, y muchas más, CSS dispone de los selectores pseudo-clase y pseudo-elemento.

Selectores de pseudoclase

Los selectores de pseudoclases te permiten asignar estilos en a lo que son, de hecho, clases fantasma inferidas por el estado de ciertos elementos, o patrones de marcado dentro del documento, o incluso por el estado del propio documento.

El término clases fantasma puede parecer un poco extraño, pero realmente es la mejor forma de pensar en cómo funcionan las pseudoclases. Por ejemplo, supongamos que quieres resaltar una de cada dos filas de una tabla de datos. Podrías hacerlo marcando una de cada dos filas con algo como class="even" y luego escribiendo CSS para resaltar las filas con esa clase, o (como pronto verás) podrías utilizar un selector de pseudoclase ...