![]() |
|||||
|
![]() ![]() ![]() |
Modificadores de selectores
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:
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í :last-of-tyep Último elemento dentro de un contenedor. Así :only-of-type Selecciona al único elemento hijo de este tipo dentro de un contenedor :only-child Este selector se refiere al único hijo dentro de un contenedor padre. Así :first-child, :last-chikd Selecciona el primer hijo de un contenedor. En la segunda forma selecciona el último hijo :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 :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 :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 ::selection Se usa para referirse a lo seleccionado por el usuario en la página web
|
|||
|