Pseudo-clases y
pseudo-elementos Pseudo-clases y
pseudo-elementosEn esta lección aprenderás:
Las hojas de estilo asocian características de estilo a los elementos basándose en las etiquetas de los elementos y en su posición relativa (en el árbol del documento). Las pseudo-clases y los pseudo-elementos permiten hacer referencia a determinados elementos sin basarse en la información contenida en el árbol del documento.
La sintaxis de las pseudo-clases y los pseudo-elementos es la misma: etiqueta:pseudo-elemento_o_pseudo-clase (el nombre de la etiqueta y del pseudo-elemento o de la pseudo-clase separado por dos puntos).
Por escribir
La pseudo clase :link (o a:link) te permite especificar el aspecto de los enlaces que todavía no han sido visitados. La pseudo clase :visited (o a:visited) te permite especificar el aspecto de los enlaces que sí han sido visitados. Ten en cuenta que los navegadores "recuerdan" los enlaces visitados hasta que se borra el historial en el navegador. En Firefox 1.0.X no se aplica la pseudo-clase hasta que se actualiza la página en el navegador.
  |
a:link { text-decoration: none; font-weight: bold;
background-color: #dddddd; } |
Este párrafo tiene un enlace a sí mismo. El enlace no aparece como suele ser habitual, porque aparece sin subrayar, en negrita y con color de fondo. |
|
a:visited { text-decoration: line-through;
font-weight: bold; background-color: #dddddd; } |
Este párrafo tiene un enlace a sí mismo. Si el navegador reconoce que el enlace se ha visitado, en vez de subrayado, sale tachado. |
Nota: añadir enlace a página de bugs de Mozilla.
Si asignas propiedades a la etiqueta a en la hoja de estilo, estas propiedades afectarán tanto a los enlaces como a los destinos que utilicen la etiqueta a. Pero si asignas propiedades a la pseudo-clase a:link, estas propiedades sólo afectarán a los enlaces.
|
a { background-color: lightblue; } | Este párrafo contiene un enlace al párrafo siguiente. |
|
a:link { background-color: lightblue; } |
Este párrafo contiene un enlace al párrafo siguiente. |
La pseudo-clase :hover te permite especificar el aspecto de un enlace sobre el que se encuentra el ratón. IE sólo es capaz de reconocer esta pseudo-clase aplicada a enlaces, mientras que Mozilla la reconoce en cualquier elemento (la verdad es que no los he probado todos, así que igual falla en algunos).
|
p { color: black; background-color: white; } a:hover { color: white; background-color: black; } |
Este párrafo está escrito en negro sobre blanco, pero cuando pasas el ratón por encima de este enlace, el enlace se escribe blanco sobre negro. |
|
p { color: black; background-color: white; } p:hover { color: white; background-color: black; } |
Este párrafo está escrito en negro sobre blanco, pero cuando pasas el ratón por encima del párrafo, se escribe blanco sobre negro. |
Contar lo que pasa cuando se gasta a la vez :link :visited y :hover (diferencias entre IE y Mozilla).
La pseudo-clase :active te permite especificar el aspecto de un enlace cuando se hace clic sobre él (y mientras se mantiene el botón del ratón apretado). IE sólo es capaz de reconocer esta pseudo-clase aplicada a enlaces, mientras que Mozilla la reconoce en cualquier elemento (la verdad es que no los he probado todos, así que igual falla en algunos).
|
p { color: black; background-color: white; } a:active { color: white; background-color: black; } |
Este párrafo está escrito en negro sobre blanco, pero cuando haces clic en este enlace, el enlace se escribe blanco sobre negro. |
|
p { color: black; background-color: white; } p:active { color: white; background-color: black; } |
Este párrafo está escrito en negro sobre blanco, pero cuando hace clic en él, se escribe blanco sobre negro. |
Falta contar :focus
Por escribir
El pseudo-elemento :first-line te permite especificar el aspecto de la primera línea de texto.
| p:first-line { text-transform: uppercase; } |
La primera línea de este párrafo se tiene que ver en mayúsculas. Modifica el tamaño de la fuente o el tamaño de la ventana para ver cómo se modifica el aspecto del párrafo. |
El pseudo-elemento :first-letter te permite especificar el aspecto de la primera letra de texto.
| p:first-letter { color: red; } |
La primera letra de este párrafo se tiene que ver en rojo. Y la primera de éste también. |
| p:first-letter { float: left; font-size: 300%;
font-family: monospace; color: red; } |
La primera letra de este párrafo es una letra capital, es decir, una letra más grande que ocupa varias líneas de texto. Para ello, en la hoja de estilo tienes que hacer la letra flotante y aumentar su tamaño. En este caso también he cambiado el color y el tipo de letra. |
En el caso de algunos primeros caracteres, Firefox aplica el pseudo-elemento a los dos primeros caracteres:
| p:first-letter { color: red; } |
¿Cuántas letras se ven en rojo? ¡En Firefox 1.0.X se ven varias! ¿¿Cuántas letras se ven en rojo?? {Llaves} #Almohadilla [Corchetes] @arroba |
Por escribir
Autor: Bartolomé Sintes Marco