Publicidad

Selectores css: hover, link, visited, active

Autor: | Categoría:

Los selectores son aquellos elementos que nos permiten aplicar estilo a algún elemento en html cuando se realiza alguna acción determinada. Estos selectores nos permiten hacer saber al usuario que ha interactuado con algún elemento de nuestra página web y hacen que la usabilidad y la experiencia de usuario sea mucho más amena y agradable para el visitante de tu sitio. Hay más selectores que hover, link, visited o active, pero estos son los que acostumbramos a usar en los enlaces.

:hover

Este selector hace referencia a cuando el evento que se produce en la web es pasar el ratón por encima de algún elemento. Por ejemplo, para hacer saber al usuario que un enlace es un enlace, al usar el selector :hover en nuestro css cambiamos el estilo de ese elemento para que se resalte y el usuario sepa que si pincha ahí irá a alguna otra web o le transportará a alguna otra parte de la misma página.

:link

Este selector hace referencia a cuando un enlace aún no ha sido visitado por el usuario. Diríamos que es el enlace sin más, cuando no se ha interactuado con ese enlace. Este selector podría pasar un poco de largo ya que si no ponemos el selector en el estilo pero estilamos dicho enlace ya hace el mismo efecto que si no… Ya, un follón: para que quede más claro, si tenemos un enlace que con un id determinado, por ejemplo #enlace, si aplicamos un estilo en nuestro css para ese id es lo mismo que si no tuviera un id y pusieramos el selector haciendo referencia a ese elemento yendo de elemento padre a elemento hijo.

:visited

Este selector hace referencia a los enlaces que ya se han pinchado y por lo tanto visitado. Imaginemos que tenemos unos enlaces en nuestra web que abren unas páginas nuevas en el navegador sin cerrar la actual (usando target:_blank en los enlaces). Para indicar al usuario que ya ha pinchado sobre ese enlace cuando retorne a nuestra vez usaremos en el css este selector dándole un estilo diferente para que no vuelva a clicar ahí encima si no lo desea.

:active

Este selector sólo sirve para estilar cuando ese enlace está siendo pinchado y antes de desclicar el botón. Digamos que es la transición entre el selector :hover y el :visited. Quizás este es el selector que menos uso tiene pero css nos permite estilarlo. Mejor que sobre que no que falte.

Recordad que en los selectores podéis cambiar un sin fin de propiedades para vuestros elementos: color, decorado, fondo, estilo tipográfico, tamaño… cualquier cosa que se os ocurra.

Conclusión

Ahora ya sabes un poco más sobre los selectores css: hover, link, visited, active. Se pueden hacer auténticas maravillas con los selectores con css3, ya que se pueden hacer transiciones, rotaciones e incluso efectos 3D, pero eso lo desvelaremos en otro post 🙂

Publicidad
Etiquetas: , , , , ,
¡Suscríbete!

¡Sé el primero en enterarte de las novedades del diseño web y mejora tus conocimientos!

Suscríbete al blog por correo electrónico

Introduce tu correo electrónico para suscribirte a este blog y recibir notificaciones de nuevas entradas.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies