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 elementos determinados 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.
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. |
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. |
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. |
Por escribir
Autor: Bartolomé Sintes Marco
Última modificación: 6 de noviembre de 2003