Pseudo-clases y
pseudo-elementosPseudo-clases y
pseudo-elementosEn esta lección se explica:
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).
La pseudo-clase :first-child hace referencia al primer elemento de un tipo contenido dentro de otro. El ejemplo siguiente muestra cómo identificar al primer párrafo dentro de una división sin necesidad de asignar ninguna clase al párrafo.
  |
div { border: blck 5px solid; margin: 10px; padding:
10px;}
div p:first-child { color: red; } |
Este es el primer párrafo en una división que contiene tres párrafos. Este es el segundo párrafo en una división que contiene tres párrafos. Este es el tercer párrafo en una división que contiene tres párrafos. |
Nota: Internet Explorer 6 no reconocía esta pseudo-clase.
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) permite especificar el aspecto de los enlaces que sí han sido visitados. Hay que tener en cuenta que los navegadores "recuerdan" los enlaces visitados hasta que se borra el historial en el navegador. Una vez borrado el historial, Firefox no 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. |
Si se asignan 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 se asigna 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 permite especificar el aspecto del elemento sobre el que se encuentra el ratón.
| |
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. |
Nota: Internet Explorer 6 no reconocía esta pseudo-clase.
Contar lo que pasa cuando se gasta a la vez :link :visited y :hover (diferencias entre IE y Firefox).
La pseudo-clase :active 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 Firefox 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. |
La pseudo-clase :focus permite especificar el aspecto de un elemento cuando este tiene el foco. Los elementos que admiten el foco en una página web son aquellos que reaccionan a entrada por teclado (por ejemplo, los elementos de los formularios o los enlaces). Esta pseudo-clase no funciona en Internet Explorer. En el ejemplo siguiente, al hacer clic en un campo de texto (o cambiar de campo con el tabulador), el campo seleccionado se resalta con un borde rojo.
| |
input:focus { border: red 2px dotted; padding: 2px; } |
Por escribir
El pseudo-elemento :first-line 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. |
En el ejemplo anterior, al hacer zoom se observa como siempre y únicamente la primea línea cambia a mayúsculas.
El pseudo-elemento :first-letter 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. |
Si hay una imagen al principio del elemento, el aspecto de la primera letra de texto no se modifica.
| |
p:first-letter { color: red; } |
Pero la primera de éste sí. |
| |
p:first-letter { color: red; } |
Pero la primera de éste sí. |
Si el primer carácter no es un carácter alfanumérico, 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} {{Llaves}} #Almohadilla [Corchetes] @arroba |
Buscar el bug de bugzilla correspondiente
Los pseudo-elementos :before y :after permiten añadir contenido desde la hoja de estilo, al principio o al final del elemento. Firefox es capaz de mostrar el contenido generado, mientras que Internet Explorer no reconoce este pseudo-elemento. En Firefox, el contenido generado no puede seleccionarse con el ratón.
El contenido generado mediante la propiedad content puede incluir texto:
| |
p.cuidado:before { content: "Aviso: "; } |
Este párrafo es un párrafo sin clase.
Este párrafo es un párrafo con clase "cuidado". Este párrafo es un párrafo sin clase. |
| |
p.autor-barto:after { content: " (escrito por barto)."; } | Este párrafo es un párrafo sin clase.
Este párrafo es un párrafo sin clase. |
El contenido generado mediante la propiedad content puede incluir una imagen indicando su URI:
| |
p.ff:before { content: url("../img/ffO.png"); } |
Este párrafo es un párrafo sin clase.
Este párrafo es un párrafo con clase "ff". Este párrafo es un párrafo sin clase. |
El contenido generado mediante la propiedad content no puede incluir etiquetas html:
| |
p.cuidado2:before { content: "<em>Aviso:</em> "; } |
Este párrafo es un párrafo sin clase.
Este párrafo es un párrafo con clase "cuidado2". Este párrafo es un párrafo sin clase. |
Se pueden generar contadores en los pseudo-elementos :after y :before mediante la propiedad content y el valor counter(nombre_de_contador). El contador debe ponerse a cero con la propiedad counter-reset y aumentarse con la propiedad counter-increment.
En el ejemplo siguiente se ha definido un contador que se llama cuenta-parrafos. Este contador se genera al principio de cada párrafo, se pone a cero con el elemento <pre> y se incrementa en cada párrafo.
| |
pre { counter-reset: cuenta-parrafos; } |
Ejemplo de contadores Este párrafo es un párrafo sin clase. Este párrafo es un párrafo sin clase. Este párrafo es un párrafo sin clase. Ejemplo de contadores Este párrafo es un párrafo sin clase. Este párrafo es un párrafo sin clase. |
Junto con el contador se puede generar texto, como muestra el ejemplo siguiente:
| |
pre { counter-reset: cuenta-parrafos; } |
Ejemplo de contadores Este párrafo es un párrafo normal y corriente. Este párrafo es un párrafo normal y corriente. Este párrafo es un párrafo normal y corriente. Ejemplo de contadores Este párrafo es un párrafo normal y corriente. Este párrafo es un párrafo normal y corriente. |
El contador predeterminado muestra números enteros, pero se puede utilizar cualquiera de los estilos de listas como estilo de contador. El estilo se indica en la propiedad content mediante el valor counter(nombre_de_contador, estilo_de_lista), como muestra el ejemplo siguiente:
| |
pre { counter-reset: cuenta-parrafos; } |
Ejemplo de contadores Este párrafo es un párrafo normal y corriente. Este párrafo es un párrafo normal y corriente. Este párrafo es un párrafo normal y corriente. Ejemplo de contadores Este párrafo es un párrafo normal y corriente. Este párrafo es un párrafo normal y corriente. |
Se pueden utilizar varios contadores simultáneamente, como muestra el ejemplo siguiente:
| |
h1 { counter-reset: cuenta-parrafos;
counter-reset: cuenta-apartados; } |
Ejemplo de contadoresApartado 1Este párrafo es un párrafo normal y corriente. Este párrafo es un párrafo normal y corriente. Este párrafo es un párrafo normal y corriente. Apartado 2Este párrafo es un párrafo normal y corriente. Este párrafo es un párrafo normal y corriente. |
La primera letra de este párrafo no se ve
en rojo porque hay una imagen.