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
} La primera regla pone en rojo todos los enlaces. La segunda pone en azul los enlaces con la clase "seguro"
: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)
Es interesante la aplicación del selector hover a elementos que no son enlaces.
Modificadores jerárquicos
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-typeindica 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
Estos pseudo selectores extienden el sistema de selectores combinados permitiendo un acceso directo a cualquier parte de la página.