Crea tu web, tutor html, css

Modificadores: selectores de ratón

Si has leído ya la página dedicada a los slectores 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 elmento 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 sobre que selectores actuar o cunado actuar sobre un determinado selector.

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.

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 :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 a 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 elmentos 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.