Selectores avanzados: las pseudo-clases
Selectores avanzados: las pseudo-clases
Las pseudo-clases son unos selectores que hacen referencia a estados de un elemento concreto, normalmente un enlace. Un ejemplo de estado es cuando pasamos el ratón por encima de un enlace, y este enlace cambia de color o se subraya. Vamos a ver cómo funcionan estas pseudo-clases.
TAREAS
- Crea una hoja de estilos.Crea un archivo estilos.css y vincúlalo en tu index.html.
- Crea clases y asígnalas a elementos.Crea clases y asígnalas a elementos html. Pon a prueba los estilos tipográficos que hemos visto (tamaño, estilo, color…).
RECURSOS ADICIONALES
PDF Apuntes Unidad 3
En HTML y CSS, los selectores avanzados nos permiten aplicar estilos más específicos y complejos a los elementos de una página web. Dentro de estos selectores avanzados, encontramos las pseudo-clases, que son muy útiles para definir el estilo de un elemento en función de su estado o su relación con otros elementos, sin necesidad de añadir clases adicionales o modificar el HTML.
¿Qué son las pseudo-clases?
Una pseudo-clase es una palabra clave añadida a un selector que define un estado especial de un elemento. Se utiliza en CSS para seleccionar elementos en base a ciertas condiciones, como si el usuario interactúa con ellos, si están enfocados, si están siendo visitados, entre otros.
Sintaxis de las pseudo-clases
La sintaxis general para usar una pseudo-clase es la siguiente:
selector:pseudo-clase {
propiedad: valor;
}
Tipos comunes de pseudo-clases
:hover: Se aplica cuando el usuario coloca el puntero del ratón sobre un elemento. Esto es común en botones o enlaces para cambiar su estilo al pasar el ratón.a:hover { color: red; }En este caso, el color del enlace cambiará a rojo cuando el puntero esté sobre él.:focus: Se aplica cuando un elemento recibe el foco, es decir, cuando el usuario hace clic en un campo de texto o navega a través de un formulario.input:focus { border-color: blue; }Esto hace que el borde de un campo de texto cambie a azul cuando el usuario hace clic en él o se mueve hacia él con el teclado.:nth-child(): Permite seleccionar un hijo específico basado en su posición dentro de su elemento padre. Se puede usar para seleccionar, por ejemplo, cada segundo o tercer elemento.li:nth-child(2) { color: green; }Este selector aplica un color verde al segundo<li>dentro de un contenedor.:first-childy:last-child: Se usan para seleccionar el primer o último hijo de un elemento.p:first-child { font-weight: bold; }Este código aplica negrita al primer párrafo dentro de un contenedor.:nth-of-type(): Similar a:nth-child(), pero selecciona un elemento según su tipo dentro de su contenedor, no solo por su posición en el DOM.p:nth-of-type(3) { font-style: italic; }Este selector aplicará estilo itálico al tercer párrafo dentro de un contenedor, sin importar si hay otros tipos de elementos entre ellos.:not(): Excluye un elemento de un conjunto de selecciones. Permite aplicar estilos a todos los elementos excepto aquellos que coincidan con un selector dado.div:not(.special) { background-color: lightgray; }Esto aplica un color de fondo gris claro a todos los<div>, excepto a aquellos que tengan la clase.special.
¿Por qué usar pseudo-clases?
Las pseudo-clases ofrecen una forma poderosa y eficiente de aplicar estilos dinámicos a los elementos de la página sin necesidad de modificar el HTML ni añadir clases extras. Son especialmente útiles para mejorar la interacción con el usuario y para aplicar estilos de manera más específica.
Resumen
Las pseudo-clases permiten seleccionar elementos según su estado o posición, brindando una gran flexibilidad para diseñar páginas web interactivas. En este curso, exploramos cómo utilizarlas para mejorar la experiencia del usuario y crear páginas más dinámicas.
