Selectores Avanzados: Seudo Clases

Existen algunos selectores que se pueden utilizar para referirse a elementos que tienen un estado determinado, este tipo de selector se les llama selector de seudo clases, por ejemplo los enlaces <a>…</a> presentan cuatro estados :

  • link (un enlace no visitado)
  • visited (un enlace visitado)
  • hover (cuando se pasa el cursor sobre el elemento)
  • active (cuando se hace clic sobre el elemento)

para referirnos a cualquiera de estos estados de los elementos <a>..</a> utilizamos el nombre del elemento seguido de dos puntos (:) y luego el estado, con excepción de los elementos no visitados, que solo requieren el nombre del elemento.

a

a:visited

a:hover

a:active

Por ejemplo cuando vemos que un enlace cambia de color cada vez que pasamos el cursor sobre el, o una vez visitado.

seudoclases-1

En el fragmento de código del archivo .css se han creado estilos para las seudoclases, para los elementos no visitados, aparecen en color verde, los visitados en color purpura, a los que se le pasa el cursor por encima de color azul y los activos de color gris.

En la siguiente figura se observa un fragmento de la salida del navegador.

seudoclases-3

Otros usos son para seleccionar el primer elemento, el ultimo elemento o el elemento enesimo que es hijo (descendiente de otro elemento).

En estos ejemplos utilizaremos el elemento p, pero puede ser cualquier otro elemento de HTML.

p:first-child (primera ocurrencia de un elemento p).

p:first-of-type (primera ocurrencia del elemento p). Funciona igual que p:first-child. pertenece al CSS3.

p:last-child (ultima ocurrencia de un elemento p).

p:last-of-type (ultima ocurrencia de un elemento p). Funciona igual que p:last-child. pertenece al CSS3.

p:nth-child(n) (la ocurrencia numero n de un elemento p).

p:nth-of-type(n) (la ocurrencia numero n de un elemento p). Funciona igual que p:nth-child(n). pertenece al CSS3.

p:nth-last-child(n) (elemento ubicado en la posición n, contando desde el ultimo elemento, es decir hacia atras).

p:nth-last-of-type(n) (elemento ubicado en la posición n, contando desde el ultimo elemento, es decir hacia atras). Funciona igual que p:nth-last-child(n). pertenece al CSS3.

También se pueden utilizar seudoclases para elementos hijos únicos.

p:only-child (para seleccionar a un elemento único dentro de su elemento que lo contiene, elemento padre).

p:only-of-type  (para seleccionar a un elemento único dentro de su elemento que lo contiene, elemento padre). Pertenece al CSS3.

En la siguiente figura se muestra un fragmento de código  con algunos ejemplos del uso de seudo clases.

seudoclases-4

La salida que se obtiene al utilizar esta hoja de estilo CSS es

seudoclases-5

Los elementos p, que son el primer elemento dentro de sus respectivos elementos padres aparecen en color rojo. El primer párrafo esta dentro del elemento body y el otro párrafo es el primer elemento dentro de un elemento div. Lo mismo puede decirse de los terceros elementos p, dentro de los elementos body y div que aparecen con fondo azul y color amarillo, al utilizar la seudo clase p:nth-child(3).

Los segundo elementos li dentro de los elementos ul y ol, también aparecen con color de fondo azul, al utilizar li:nth-child(2).

Referencias Bibliográficas

http://www.w3schools.com/cssref/css_selectors.asp

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s