:Pseudo selectores

Si has leído ya la página dedicada a los selectores CSS ya sabes que se puede aplicar una regla a un elmento de la página en función de su contenido. También sabes ya que un selector se define con un nombre y poco más.

Pero aún se puede afinar más en la elección de un elemento de la página mediante los llamados pseudo-selectores, que también podríamos llamar modificadores: son nombres clave que se escriben tras el nombre del selector separados de ellos por uno o dos caracteres : (dos puntos), y que seleccionan en que casoas se aplica el estilo a los elementos seleccionados, o incluso cuando apllicarlo en función del ratón o de la actividad del usuario, de manera condicional.

Si ves los selectores como localizadores de elementos de la página, los pseudo-selectores son como filtros para afinar esta localización, para concretar aún más.

Permiten aplicar estilos a elementos de la página incluso sin necesidad de usar las etiquetas de HTML como class o id

El primer modificador que te presento es uno que redefine el selector de enlaces (<a href></a>) para que actue en función de la interacción del usuario. Si el usuario pulsa sobre un enlace ese elemento (<a href>) de alguna forma ha cambiado o si pasa con el ratón por encima de una celda esa celda ha cambiado de alguna forma. CSS detecta esas situaciones y puede diferenciar un elemento según su estado

:link

Es un enlace sobre el que no se ha clickado con el ratón. Se aplica a los elementos <a href>.

a:link {color: red}
a.seguro:link {color: blue}

:visited

Se ha clickado sobre el enlace con el ratón, es por tanto un enlce usado

:active

La regla se aplica al elemento que está siendo clickado con el ratón. Este selector se puede aplicar a cualquier elemento, no solo a los enlaces

:hover

La regla se aplica cuando el ratón pasa por encima del elemento. También se puede aplicar a cualquier selector, no solo a los links, y debe ir definido después de  :link y :visited (si se usan)

Si defines un estilo para el selector p esta regla se aplica a todos los párrafos del documento, pero CSS permite modificar este comportamiento para que la regla se aplique solo a determinados párrafos. Los llamo jerárquicos porque de alguna fomra siguen un orden de situación en la cascada del esquema de un documento web.

:root

Selecciona el elemento padre de todo el documento, en las páginas web es el elemento HTML Realmente este selector es equivalente al selector html

:first-of-type

Primer elemento de un determinado tipo 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-type

Último elemento dentro de un contenedor. Así
p:last-of-type se refiere 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 hijo 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 seleccionado 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 elementos que no son del tipo al que se aplica
:not(p) selecciona los elementos que no son párrafos