Nuestro Blog

Las pseudo-clases son «palabras» adicionales que agregamos en una regla CSS para establecer algún tipo de efecto especial. Los más conocidos son los que usamos en los enlaces y el orden en que colocamos esas definciones es importante.

Estos son los más usados:

• (:link ) se aplica a todos los enlaces que todavía no han sido visitados por el usuario.

                    Ejemplo: a:link {color:rojo;}

• (:visited ) se aplica a todos los enlaces que han sido visitados al menos una vez por el usuario.

                    Ejemplo: a:visited {color:rojo;}

• (:hover) se activa cuando el usuario pasa el ratón o cualquier otro elemento apuntador por encima de un elemento.

                    Ejemplo: a:hover{color:rojo;}

• (:active) se activa cuando el usuario activa un elemento, por ejemplo cuando pulsa con el ratón sobre un elemento. El estilo se aplica durante un espacio de tiempo prácticamente imperceptible, ya que sólo dura desde que el usuario pulsa el botón del ratón hasta que lo suelta.

                   Ejemplo: a:active{color:rojo;}

• (:focus) se activa cuando el elemento tiene el foco del navegador, es decir, cuando el elemento está seleccionado. Normalmente se aplica a los elementos <input> de los formularios cuando están activados y por tanto, se puede escribir directamente en esos campos.

                   Ejemplo: a:focus{color:rojo}

• Por último, también es posible aplicar estilos combinando, varias pseudo-clases compatibles entre sí. La siguiente regla CSS por ejemplo sólo se aplica a aquellos enlaces que están seleccionados y en los que el usuario pasa el ratón por encima.

                  Ejemplo: a:visited :hover{…..}

• (:target) permite cambiar el estilo al elemento al que llegamos en una navegación con anclas mediante identificadores (id) dentro de una misma página.

                  Ejemplo: a:target {…}