Volver al índicePseudo-clases y pseudo-elementos

En esta página se tratan los siguientes temas:


Qué son las pseudo-clases y los pseudo-elementos

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).

Volver al principio de la página


La pseudo-clase :first-child

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.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
div { 
  border: black 5px solid; 
  margin: 10px; 
  padding: 10px;
} 
div p:first-child { 
  color: red; 
}

Este es el primer párrafo <p> en una división que contiene tres párrafos.

Este es el segundo párrafo <p> en una división que contiene tres párrafos.

Este es el tercer párrafo <p> en una división que contiene tres párrafos.

Es necesario que el tipo del primer elemento hijo en la página web sea el indicado en la hoja de estilo. En el ejemplo siguiente, el primer elemento dentro de la división es un <pre>, no un <p>, así que no se le aplica el estilo indicado en la hoja de estilo.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
div { 
  border: black 5px solid; 
  margin: 10px; 
  padding: 10px;
} 
div p:first-child { 
  color: red; 
}
El primer hijo no es párrafo <p>, sino un <pre>.

Este es el primer párrafo <p> en una división que contiene tres párrafos.

Este es el segundo párrafo <p> en una división que contiene tres párrafos.

Este es el tercer párrafo <p> en una división que contiene tres párrafos.

En el ejemplo siguiente, la psuedo-clase :first-child se aplica al primer elemento dentro de la división, ya que en la hoja de estilo no se especifica el elemento.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
div { 
  border: black 5px solid; 
  margin: 10px; 
  padding: 10px;
} 
div :first-child { 
  color: red; 
}
El primer hijo no es párrafo <p>, sino un <pre>.

Este es el primer párrafo <p> en una división que contiene tres párrafos.

Este es el segundo párrafo <p> en una división que contiene tres párrafos.

Este es el tercer párrafo <p> en una división que contiene tres párrafos.

Volver al principio de la página


Las pseudo-clases de enlace :link y :visited

La pseudo clase :link (o a:link) 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.

Los navegadores "recuerdan" los enlaces visitados, pero no de la misma manera. Internet Explorer 8 los recuerda mientras no se recargue la página, mientras que Firefox los recuerda hasta que se borra el historial en el navegador.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
a:link { 
  color: green; 
}

Este párrafo tiene un enlace a sí mismo. El enlace no aparece como suele ser habitual, porque se muestra en verde.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
a:visited { 
  color: red;
}

Este párrafo tiene un enlace a sí mismo. Si el navegador reconoce que el enlace se ha visitado, en vez de en verde, se muestra en rojo.


En la recomendación CCS 2 se podía utilizar la pseudo clase :visited para modificar cualquier propiedad, pero como una página web maliciosa podía utilizar esta propiedad para saber las páginas que el usuario había visitado, los navegadores han reducido el número de propiedades que se pueden aplicar con esta propiedad. La recomendación CSS 2.1 alerta de ese peligro y permite que los navegadores no permitan modificar ninguna propiedad o sólo admitan algunas propiedades.

Enlaces relacionados: Privacy and the :visited selector - Plugging the CSS History Leak

Teóricamente, las propiedades que podrían modificarse sin riesgo son las relacionadas con colores. El siguiente ejemplo prueba esas cuatro propiedades. En el ejemplo se establecen antes las propiedades en la etiqueta <a> porque si no Firefox y Chrome no la modifican.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
a { 
  background-color: white; 
  color: blue; 
  border: white 3px solid; 
  outline: white 3px solid;
}

a:visited { 
  background-color: yellow;
  color: red;
  border-color: black;
  outline-color: red;
}

Este párrafo tiene un enlace a sí mismo. Si el navegador reconoce que el enlace se ha visitado, se muestra en rojo y con el fondo amarillo (y puede que con un borde verde y un contorno azul).

Nota: Internet Explorer 9 no permite modificar cualquier propiedad mediante la pseudo clase :visited, pero Internet Explorer 8 lo permitía, como se comenta en la página de diferencias entre IE9 e IE8.


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.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
a { 
  background-color: lightblue; 
}
Este párrafo contiene un enlace al párrafo siguiente.

Destino definido con la etiqueta <a>.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
a:link { 
  background-color: lightblue; 
}
Este párrafo contiene un enlace al párrafo siguiente.

Destino definido con la etiqueta <a>.

Volver al principio de la página


Las pseudo-clases dinámicas :hover, :active y :focus

La pseudo-clase :hover permite especificar el aspecto del elemento sobre el que se encuentra el ratón.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
p { 
  background-color: white; 
  color: black; 
}
a:hover { background-color: black; color: white; }

Este párrafo está escrito en negro sobre blanco, pero cuando se pasa el ratón por encima de este enlace, el enlace se muestra de color blanco sobre fondo negro.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
p { 
  background-color: white; 
  color: black; 
}
p:hover { background-color: black; color: white; }

Este párrafo está escrito en negro sobre blanco, pero cuando se pasa el ratón por encima del párrafo, se muestra de color blanco sobre fondo negro.

Contar lo que pasa cuando se gasta a la vez :link :visited y :hover (diferencias entre Firefox e Internet Explorer antiguos).


La pseudo-clase :active permite especificar el aspecto de un elemento cuando se hace clic sobre él (y mientras se mantiene el botón del ratón apretado).

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
p { 
  background-color: white; 
  color: black; 
}
a:active { background-color: black; color: white; }

Este párrafo está escrito en negro sobre blanco, pero cuando se hace clic en este enlace, el enlace se muestra de color blanco sobre fondo negro.

Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
p { 
  background-color: white; 
  color: black; 
}
p:active { 
  background-color: black; 
  color: white; 
}

Este párrafo está escrito en negro sobre blanco, pero cuando se hace clic en él, se muestra de color blanco sobre fondo 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). 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.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
input:focus { 
  border: red 2px dotted; 
  padding: 2px; 
}

Volver al principio de la página


La pseudo-clase de idioma :lang()

La pseudo-clase de idioma :lang() permite especificar el aspecto de los elementos de un idioma determinado. En el ejemplo siguiente se cambia las comillas utilizadas en una cita <q> según el idioma indicado en el atributo lang.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
<p>Ambrose Bierce dijo (más o menos) que 
<q lang="es">una cita es una manera de repetir
erróneamente las palabras de otros</q>.</p>

<p>Ambrose Bierce dijo (más o menos) que 
<q lang="en">a quotation is the act of repeating
erroneously the words of another</q>.</p>
Ambrose Bierce dijo (más o menos) que una cita es una manera de repetir erróneamente las palabras de otros.

Ambrose Bierce dijo (más o menos) que a quotation is the act of repeating erroneously the words of another.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
q:lang(es) {
  quotes: "«" "»";
}

q:lang(en) {
  quotes: '"' '"';
}

Volver al principio de la página


Los pseudo-elementos :first-line y :first-letter

El pseudo-elemento :first-line permite especificar el aspecto de la primera línea de texto.

Correcto en Firefox Correcto en Internet ExplorerIncorrecto en Chrome
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.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
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.

1 Si es número, también se ve en rojo.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
p:first-letter { 
  background-color: pink;
  color: red; 
  float: left; 
  font-family: monospace; 
  font-size: 400%; 
}

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.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
p:first-letter { 
  color: red; 
}

Smiley La primera letra de este párrafo no se ve en rojo porque hay una imagen.

Pero la primera de éste sí.

Pero si la imagen es una imagen flotante, Firefox no modifica el aspecto de la primera letra de texto, aunque Internet Explorer y Chrome sí lo hacen.

Correcto en Firefox Incorrecto en IE9Correcto en IE8Incorrecto en Chrome
p:first-letter { 
  color: red; 
}

img {
  float: right;
}

Smiley La primera letra de este párrafo se ve rojo en algunos navegadores y en otros no porque hay una imagen flotante (la imagen se vea a la derecha porque tiene float: right).

Pero la primera de éste sí.

Correcto en Firefox Incorrecto en IE9Correcto en IE8Incorrecto en Chrome
p:first-letter { 
  color: red; 
}

img {
  float: lef;
}

Smiley La primera letra de este párrafo se ve rojo en algunos navegadores y en otros no porque hay una imagen flotante (la imagen se vea a la derecha porque tiene float: left).

Pero la primera de éste sí.

Nota: Internet Explorer 9 modifica el aspecto de la primera letra aunque haya una imagen flotante, pero Internet Explorer 8 no lo hacía, como se comenta en la página de diferencias entre IE9 e IE8.

Nota: En realidad no tengo claro si quien lo hace bien es Firefox e IE8 o Chrome e IE9


Si el primer carácter no es un carácter alfanumérico, el pseudo-elemento se aplica hasta el primer carácter alfanumérico:

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
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??

¿¿¿¿Cuántas letras se ven en rojo????

{Llaves}

{{Llaves}}

#Almohadilla

[Corchetes]

@arroba

@[{}]@

Volver al principio de la página


Los pseudo-elementos :before y :after

Contenido generado: content

Los pseudo-elementos :before y :after permiten añadir contenido a un elemento desde la hoja de estilo, al principio o al final del elemento.

Nota: En Firefox y Google Chrome, el contenido generado no puede seleccionarse con el ratón, pero en Internet Explorer sí, como se comenta en la página de diferencias entre Firefox e Internet Explorer.

El contenido generado mediante la propiedad content puede incluir texto:

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
p.cuidado:before { 
  content: "Aviso: ";
  font-weight: bold;
  text-decoration: underline; 
}
Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo <p> con clase "cuidado".

Este párrafo es un párrafo <p> sin clase.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
p.autor-barto:after { 
  content: " (escrito por Barto)."; 
}
Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo <p> con clase "autor-barto".

Este párrafo es un párrafo <p> sin clase.

El contenido generado mediante la propiedad content puede incluir una imagen indicando su URI:

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
p.ff:before { 
  content: url("../img/ffO.png");
}
Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo <p> con clase "ff".

Este párrafo es un párrafo <p> sin clase.

No es válido incluir etiquetas html en la propiedad content, es decir que no sólo los navegadores no hacen caso y lo incluyen como texto, no como código html, sino que al validar la hoja de estilo daría error:

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
p.cuidado2:before { 
  content: "<em>Aviso:</em> "; 
}
Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo <p> con clase "cuidado2".

Este párrafo es un párrafo <p> sin clase.

Volver al principio de la página


Generar contadores: content, counter-increment y counter-reset

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 los ejemplos siguientes 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.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
pre { 
  counter-reset: cuenta-parrafos; 
}

p:before { content: counter(cuenta-parrafos);
  counter-increment: cuenta-parrafos; }
Ejemplo de contadores (este párrafo es un <pre>)

Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo s<p> in clase.

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
pre { 
  counter-reset: cuenta-parrafos; 
}
p:before { content: counter(cuenta-parrafos);
  counter-increment: cuenta-parrafos; }
Ejemplo de contadores (este párrafo es un <pre>)

Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo <p> sin clase.

Ejemplo de contadores (este párrafo es un <pre>)

Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo <p> sin clase.

El contador puede incrementarse en cualquier cantidad entera, como muestra el ejemplo siguiente:

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
pre { 
  counter-reset: cuenta-parrafos; 
}

p:before { content: counter(cuenta-parrafos);
  counter-increment: cuenta-parrafos 10; }
Ejemplo de contadores (este párrafo es un <pre>)

Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo s<p> in clase.

Junto con el contador se puede generar texto, como muestra el ejemplo siguiente:

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
pre { 
  counter-reset: cuenta-parrafos; 
}

p:before { content: counter(cuenta-parrafos)". ";
  counter-increment: cuenta-parrafos; }
Ejemplo de contadores (este párrafo es un <pre>)

Este párrafo es un párrafo <p> normal y corriente.

Este párrafo es un párrafo <p> normal y corriente.

Este párrafo es un párrafo <p> normal y corriente.

Ejemplo de contadores (este párrafo es un <pre>)

Este párrafo es un párrafo <p> normal y corriente.

Este párrafo es un párrafo <p> 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:

Correcto en Firefox Correcto en Internet ExplorerCorrecto en Chrome
pre { 
  counter-reset: cuenta-parrafos; 
}

p:before { content: counter(cuenta-parrafos, upper-roman)". ";
  counter-increment: cuenta-parrafos; }
Ejemplo de contadores (este párrafo es un <pre>)

Este párrafo es un párrafo <p> normal y corriente.

Este párrafo es un párrafo <p> normal y corriente.

Este párrafo es un párrafo <p> normal y corriente.

Ejemplo de contadores (este párrafo es un <pre>)

Este párrafo es un párrafo <p> normal y corriente.

Este párrafo es un párrafo <p> normal y corriente.

Se pueden utilizar varios contadores simultáneamente, como muestra el ejemplo siguiente:

Correcto en FirefoxCorrecto en IE9Incorrecto en IE8 Correcto en Chrome
h4 { 
  counter-reset: cuenta-parrafos; 
  counter-reset: cuenta-apartados; 
}

h5 { counter-reset: cuenta-parrafos; }
h5:before { content: counter(cuenta-apartados, upper-alpha)". ";
  counter-increment: cuenta-apartados; }

p:before { content: counter(cuenta-apartados, upper-alpha)"-"counter(cuenta-parrafos)". ";
  counter-increment: cuenta-parrafos; }

Ejemplo de contadores

Apartado 1

Este párrafo es un párrafo <p> normal y corriente.

Este párrafo es un párrafo <p> normal y corriente.

Este párrafo es un párrafo <p> normal y corriente.

Apartado 2

Este párrafo es un párrafo <p> normal y corriente.

Este párrafo es un párrafo <p> normal y corriente.

Nota: Internet Explorer 9 puede mostrar varios contadores simultáneamente, pero Internet Explorer 8 no lo hacía, como se comenta en la página de diferencias entre IE9 e IE8.

Volver al principio de la página

Última modificación de esta página: 13 de octubre de 2013

Licencia Creative Commons
Páginas web HTML / XHTML y hojas de estilo CSS por Bartolomé Sintes Marco
se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional (CC BY-SA 4.0).