| 2.3 Pseudo-clases | ||||
 |
Anterior | Siguiente |  |
|
¡CSS en acción!
Seleccione otra hoja de estilo para navegar:
Actual: default.css
Todos los selectores vistos hasta el momento se refieren a elementos que podemos encontrar dentro del código HTML. Las pseudo-clases (y los pseudo-elementos), por el contrario, no pueden deducirse simplemente observando la estructura del documento. Puede decirse que son abstracciones que permiten referirse a elementos que de otro modo resultarían inaccesibles.
Las pseudo-clases son:
La pseudo-clase :first-child selecciona un elemento que es el primer hijo de otro elemento. Por ejemplo, si queremos que un párrafo no tenga sangría cuando sea el primer hijo de un DIV:
DIV > P:first-child {text-indent: 0}
Noten que entre P y :first-child no debe haber espacio,
pero entre DIV y > y P pueden o no
quedar espacios intermedios.
Si queremos seleccionar un elemento cuando sea el primer hijo de cualquier elemento, podemos usar el selector universal:
* > H1:first-child {color: blue} /* usando el asterisco */
H1:first-child {color: blue} /* o bien podemos obviar el asterisco */
Por medio de estas dos pseudo-clases, podemos definir el estilo para los links que aparecen en nuestras páginas y otro estilo para esos links cuando ya han sido visitados.
En HTML, dentro de la marca BODY también se puede especificar un color para los links y otro para los links visitados, pero con CSS se pueden cambiar muchos otros atributos.
Después de cierto tiempo (posiblemente cuando se borre el archivo del historial del sistema) el link visitado puede volver a su condición normal.
Estas son pseudo-clases dinámicas, ya que cambian en respuesta a las acciones del usuario.
:hover se aplica cuando el cursor del mouse señala el
elemento. :active se aplica cuando el elemento es activado (por ejemplo,
cuando el usuario presiona el botón del mouse). :focus se aplica cuando el elemento recibe el foco. Uno de los mayores desvelos de los diseñadores de páginas Web han sido siempre los links y la manera de hacer que estos cambien de aspecto al ser señalados por el mouse. Con frecuencia, la solución consistía en utilizar dos imágenes que se cambiaban mediante JavaScript u otro lenguaje. Afortunadamente, con CSS podemos simplificar todo el proceso y obtener efectos muy variados en nuestros enlaces.
Normalmente, se utilizan las cuatro pseudo-clases siguientes para controlar el comportamiento de los links.
A:link {color: red}
A:visited {color: gray}
A:hover {color: blue}
A:active {color: fuchsia}
Aquí especificamos un color rojo para los links, un color gris para los ya visitados, un color azul cuando es señalado y un fucsia cuando es activado. Se debe tener en cuenta que, por las reglas de cascada, el orden en que deben ser especificadas estas cuatro pseudo-clases para que funcionen correctamente es el que se ha usado en el ejemplo.
En HTML es posible especificar el idioma que se usa en un elemento mediante
el atributo lang. Por ejemplo, para identificar que un párrafo
está en francés se usa:
<P lang:"fr">
El código para identificar el idioma consta generalmente de dos letras:
"es" español, "en" inglés,
"de" alemán, "fr" francés,
etc. Mediante la pseudo-clase :lang podemos seleccionar elementos
en base a su idioma.
Como cada idioma tiene sus propias convenciones con respecto al formato (uso de itálicas, sangrías o comillas, por ejemplo), esta pseudo-clase nos permite describir cómo debe aparecer un elemento según el idioma usado. La siguiente regla especifica el tipo de comillas que debe usar un elemento Q en francés:
Q:lang(fr) { quotes: '« ' ' »' }