- Como hemos visto, los selectores se refieren a partes estructurales del documento: un tipo de elementos, los elementos que son descendientes de otros, los elementos de una clase, etc. Pero a veces es útil seleccionar elementos no sólo por su papel estructural, sino también por su presentación.
- A ver, explícate un poco.
- Por ejemplo, para seleccionar un elemento A
, nos bastaría con el selector A
, pero ¿qué pasa si quiero dar una apariencia diferente a los vínculos visitados y a los que aún no han sido visitados? Otro ejemplo, ¿cómo selecciono la primera línea de un párrafo, si hasta que no está representado no sé cuál es la primera línea?
- Sí, ya veo a qué te refieres.
- En CSS1 existen tres pseudo-clases para los elementos A
que tengan un atributo href
, que son link
(no visitados), visited
(visitados) y active
(activos, por ejemplo, mientras el usuario está haciendo clic con el ratón sobre el vínculo). La manera de representar estas pseudo-clases es la siguiente:
A:link { color: blue }
A:visited { color: red }
A:active { color: lime }
Es decir, con dos puntos en lugar de uno solo.
- Ah, qué cosas.
- Es importante que A:active
sea la última que declares por cuestiones de herencia, pero de eso hablaremos después.
- Vale.
- Hay otra pseudo-clase definida en CSS2 que a todo el mundo le gusta mucho, la pseudo-clase hover
, que es para cuando el ratón pasa por encima del vínculo, y se debe poner justo antes de A:active
:
A:link { color: blue }
A:visited { color: red }
A:hover { color : yellow }
A:active { color: lime }
- Muy bien.
- Los pseudo-elementos definidos en CSS1 son el correspondiente a la primera línea de un párrafo, y el correspondiente a la primera letra de un párrafo. Para hacer referencia a la primera línea de un párrafo, se hace lo siguiente:
P:first-line { font-weight : bold }
- Ya veo, en este caso la primera línea saldría en negrita, ¿no?
- Sí. Y para acceder a las propiedades de la primera letra, P:first-letter
, por ejemplo:
p { font-size: 1em; line-height: 1.2em; text-align : justify }
p:first-letter { font-size: 200%; float: left; font-weight: bold }
p:first-line { text-transform: uppercase }
- ¡Eh, eso está genial!
- Bien, pues vamos a hablar del mecanismo de cascada y acabar el tutorial.
- Muy bien.
Sitio Web mantenido por Juan R. Pozo (jrpozo arroba conclase punto net).
Última modificación: 14/10/2001 - © 2001 Juan R. Pozo y conclase.net