Estamos de regreso con nuestra página web que tiene enlaces en una lista de pinturas famosas.
El CSS empieza con una regla que establece el tipo de letra "sans-serif" para todo lo que está en la etiqueta ""
Luego una regla para selectores agrupados que cambia el tipo de letra en los encabezados "" y "".
Y luego tenemos muchas reglas que probablemente no habías visto antes y que parecen un poco graciosas.
Todas empiezan con una "a", luego dos puntos, y luego una palabra.
¿Qué significan los dos puntos? ¿Para qué son esas reglas?
Bueno, todas esas cosas que empiezan con dos puntos se llaman pseudo-clases.
Las pseudo-clases se usan para seleccionar elementos con base en información que no es realmente parte de la estructura de la página web,
o que simplemente no puede ser expresada usando otros selectores.
En esta página, estoy usando pseudo-clases para estilizar los enlaces basándome en su estado.
La pseudo-clase "link" selecciona los enlaces en la página, que el usuario todavía no ha visitado.
Que la mayoría de los navegadores ponen en azul por defecto.
La pseudo-clase "visited" seleccionará todos los enlaces que el usuario ya ha visitado.
Que la mayoría de los navegadores ponen en morado por defecto.
Si queremos realmente, podemos cambiar los colores.
Pero deberíamos tener una buena razón para hacerlo.
La gente está acostumbrada a asociar el azul y el morado con las cosas que han visto y que no han visto.
Y a la gente le gusta saber qué páginas ya ha visitado.
Así que no deberías cambiar eso sin una buena razón.
Así que voy a borrar estas dos reglas.
Porque, personalmente, no creo que sea una buena idea estar jugando con eso.
La siguiente es una regla divertida: "a:hover".
La pseudo-clase "hover" selecciona un elemento en tanto que el ratón esté sobre él.
Así que las propiedades se aplicarán sólo en ese momento.
Pruébenlo pausando esta guía paso a paso y pasen por encima de los enlaces para ver qué pasa.
¡Adelante!, esperaré. "Hover", "hover", "hover", "hover"...
¿Vieron que el fondo cambió de color? Es un efecto muy bueno.
Y en realidad pueden usar la pseudo-clase "hover" en cualquier elemento, no solamente en enlaces.
Sólo recuerden que no funcionará en todos los dispositivos.
Como en un teléfono, no tienes manera de pasar por encima. Sólo puedes tocar o no tocar.
Es genial tener un efecto "hover" como un extra, pero no confíes en él.
¿Y qué pasa con estos dos últimos? Son similares a "hover".
Dependen de lo que el usuario esté haciendo.
La pseudo-clase "active" selecciona elementos que están siendo activados.
Como en un enlace, si el usuario está presionando en el enlace, justo antes de que realmente cambie de página.
La pseudo-clase "focus" selecciona los elementos que actualmente tienen el enfoque,
lo que generalmente pasa si usas la tecla TAB.
Pausa esta guía paso a paso y trata de presionar en los enlaces y muévete a través de ellos con la tecla TAB, para ver qué pasa.
¿Viste que el fondo cambia de color cuando haces eso?
Escogí la misma propiedad para "hover", "active" y "focus", porque todos son del mismo tipo.
El usuario se está dirigiendo al enlace de alguna manera.
Muchos diseñadores web usan las mismas propiedades para estos tres estados por esa misma razón.
¿Qué pasa si decido que quiero cambiar el color de fondo?
Bueno, puedo ir a cada uno de ellos y cambiar cada uno.
O puedo hacer lo que recién aprendimos.
Puedo agrupar los selectores, poniéndolos en una sola regla, separados por comas.
Así que pondremos una coma después de éste, "a:active," luego "a:focus".
Ahora puedo borrar estos dos y puedo cambiar estos tres al mismo tiempo. Bien.
Estas son las primeras pseudo-clases que hemos mostrado aquí, pero no son las únicas.
Puedes buscar más pseudo-clases de CSS en Internet,
o esperar a que enseñemos más aquí.