Existen elementos del lenguaje HTML que disponen de estados especiales asociados, eso se traduce en modificadores de estilos basados en estos estados. El mejor ejemplo para entender esto es el elemento <a href...></a> usado para los enlaces, este elemento puede estar en cuatro estados:

• normal: Su estado normal, nunca se ha clickado en él.
• visited: Cuando ya hemos visitado el link al que hace referencia
• hover: Cuando tenemos el cursor situado encima del mismo
• active: Cuando hacemos click sobre él

Así podemos usar las reglas de estilo del elemento a y sus cuatro estados y esto lo hacemos con las llamadas pseudo-clases o pseuso-selectores

CSS3 introduce nuevos modificadores o pseudo-clases que permite un control muy detallado sobre el aspecto de la página. Veamos los en detalle

:root

Selecciona el elemento padre de todo el documento, en las páginas web es el elemento HTML

:first-of-type

Primer elemento dentro de un contenedor. Así
p:first-of-type indica el primer párrafo dentro de un elemento padre (bloque div, body, celda...)

:last-of-tyep

Último elemento dentro de un contenedor. Así
p:last-of-type se refiera al último párrafo dentro de un elemento padre (bloque div, body, celda...)

:only-of-type

Selecciona al único elemento hijo de este tipo dentro de un contenedor
p:only-of-type si el elemento padre contiene un sólo elemento tipo párrafo esta regla se aplica a ese párrafo

:only-child

Este selector se refiere al único hijo dentro de un contenedor padre. Así
p:only-child selecciona un párrafo si es el único hijo del elemento padre.

:first-child, :last-chikd

Selecciona el primer hijo de un contenedor. En la segunda forma selecciona el último hijo
p:first-child se aplica al primer párrafo que sea el primer hijo dentro del elemento padre

:nth-child(n), :nth-last-child(n),

Selecciona el hijo de orden n (1º, 2º...). En la segunda forma empieza a contar por el final
p:nth-child(2) se aplica al párrafo que sea el segundo hijo dentro del elemento padre

:nth-of-type(n) , nth-last-of-type(n)

Selecciona el elemento de orden n (1º, 2º...). En la segunda forma empieza a contar por el final

p:nth-child(2) se aplica al segundo párrafo dentro del elemento padre, puede ser tercer hijo o cuarto...

:empty

Selecciona los elementos del tipo selecconado que no tienen hijos
div:empty se aplicaría a los bloques DIV que no poseen hijos, es decir vacíos.

:target

Selecciona los destinos de los enlaces internos de una página, o sea, el destino dentro de la página al que se refieren los enlaces internos (< a href="#cap1">Capitulo 1<a>).

:enabled, :disabled, :checked

Selecciona elementos de formularios habilitados (enabled), desabilitados (disabled) o marcados(checked)

:not(selector)

Selecciona los elmentos que no son del tipo al que se aplica
:not(p) selecciona los elementos que no son párrafos

::selection

Se usa para referirse a lo seleccionado por el usuario en la página web

 

 

arriba