Hola de nuevo estimados estudiantes de HTML5 y CSS3. No voy a ser pesado con que he vuelto a retomar las clases, para eso podéis ver el vídeo que publiqué en Facebook. Así que vamos a lo que realmente nos interesa. Vamos a continuar estudiando CSS3 desde donde lo dejamos. Recordad que la clase anterior fue “El Selector de atributo de una lista de valores separados por un espacio”. Esta publicación ya estaba redactada desde hace tiempo y vamos a seguir ahora con “Las pseudo clases en CSS3”. Ahora que he aclarado esto, vamos al turrón.
Los selectores de clase, son uno de los selectores que más han evolucionado en esta versión 3 de CSS. Nos permiten acceder a diferentes etiquetas, que usando otros selectores que hemos estudiado anteriormente, no podíamos. La estructura de un selector de tipo pseudo-clase seria la siguiente:
/* CSS */
Selector: Pseudo-clases { propiedad: valor; }
Nos vamos a encontrar con selectores de tipo pseudo-clases dinámicas. Estas pseudo-clases son de tipo :link y :visited. Estas dos pseudo-clases se aplican únicamente a los enlaces. Vamos a poder aplicar estilos a los enlaces basándonos en su estado. Es decir, aplicar estilos cuando un enlace ha sido visitado por un usuario y así cambiar la apariencia de dicho enlace. La pseudo-clase :link se aplica a todos los enlaces que todavía no han sido visitados por el usuario. La pseudo-clase "visited" se aplica a todos los enlaces que han sido visitados al menos una vez por el usuario.
A continuación, vamos a aplicar algunos estilos a unos enlaces. Ya sabéis como crear enlaces o links con HTML5, así que coged vuestro editor de texto preferido y cread algunos enlaces para practicar esto.
/* CSS */
a:link { background: red; color: white; font-weight: bold; font-size: 20px; }
a:visited { background: gray; color: white; }
Una cosa que es importante comentar, es que Por motivos de privacidad, se han limitado gran cantidad de estilos que se pueden aplicar a las pseudo-clases :visited. Ya que según un artículo de "MDN", cualquier persona, podría rastrear todos tus pasos tomando como criterio los enlaces visitados. Con lo cual, para evitar esto se han limitado la utilización de diferentes estilos a las pseudo-clases :visited.Los únicos estilos que podemos aplicar a las pseudo-clases :visited son los siguientes:
/* CSS */
a:visited { background: gray; color: white; border-color: red; outline-color: blue; }
Es todo lo que necesitamos saber hasta el momento sobre las pseudo-clases :link y :visited. Es importante tener en cuenta el tema de la privacidad, no vaya a ser que nos metamos en problemas por un despiste. Una clase sencilla para comenzar esta temporada de estudio. Me alegra estar por aquí y voy a intentar que terminemos el curso lo más rápido posible. De esta manera podríamos meternos en el tema de crear sitios web adaptados para diferentes dispositivos.
¡HASTA LA PRÓXIMA CLASE!
0 Comentarios