pseudo-clases y pseudo-elementos

Descripción de los ejemplos

La hoja de estilos genérica de esta página consta de quince reglas para medios de pantalla, cada una de las cuales hace uso de al menos una pseudo-clase o un pseudo-elemento, procedentes de los tres niveles de CSS:

h2:hover { background-color:#FDB; }

En este caso la archiconocida pseudo-clase es aplicada a los elementos h2, y no a los enlaces, como es habitual. Los navegadores que soporten correctamente el segundo nivel de CSS en este medio deberían mostrar un cambio en el color de fondo de los encabezados mencionados (como el que precede a esta sección, y que reza Descripción de los ejemplos) al pasar el puntero por encima.

:target { border-bottom:1px dashed #008; }

El resultado debería ser una línea discontínua bajo el elemento destino del enlace, de manera que probablemente sea interesante activar un enlace interno, como éste o este otro. (CSS3).

td:lang(pt) { color:#0A0; }
td:lang(es) { color:#A00; }
td:lang(fr) { color:#00A; }

Estas tres reglas simplemente establecen un color para el texto de las celdas de tabla en función del lenguaje (humano) utilizado. Puede verse el resultado de este grupo de reglas y del siguiente en la tabla de ejemplo.

tr:nth-child(3n+1) td { background-color:#FFC; }
tr:nth-child(3n+2) td { background-color:#AAC; }
tr:nth-child(3n+3) td { background-color:#CCC; }

En estas otras tres se ensayan los selectores de pseudo-clase :nth-child para producir la alternancia por filas de tres colores de fondo diferentes para sus celdas. Por ejemplo, la primera selecciona las celdas que pertenecen a la primera fila (3*0+1=1), a la cuarta (3*1+1=4), a la séptima (3*2+1=7), etc.. (CSS3).

blockquote p:not(:first-child) { text-indent:2em; }

Aplica una sangría de primera línea a los párrafos que no ocupen el primer lugar dentro de un elemento blockquote. Puede verse el resultado de esta regla y de las restantes en el texto de ejemplo, que consiste en un elemento blockquote que contiene tres párrafos. (:not() forma parte de CSS3)

blockquote p:before { content:"» "; }
blockquote p:first-child:before { content:""; }

La primera de estas dos reglas agrega, mediante la propiedad content, la cadena "» " antes del contenido de los párrafos de un elemento blockquote. La segunda utiliza de nuevo la pseudo-cláse :first-child para seleccionar sólo el primer párrafo y anular en éste el efecto de la primera regla.

blockquote p:first-child:first-line { font-size:1.5em; }

Establece un tamaño de letra mayor para la primera línea de los párrafos que ocupen el primer lugar dentro de un elemento blockquote.

blockquote p:first-child:first-letter { font-size:1.5em; }

Define un tamaño de letra mayor para la primera letra de los párrafos que ocupen el primer lugar dentro de un elemento blockquote.

blockquote p:contains("muy raro") { background-color:#BAC; }

Establece un color de fondo para los párrafos en cuyo contenido aparezca la cadena "muy raro" dentro de un elemento blockquote. (CSS3).

blockquote ::selection { background-color:#F00; color:#008; }

Aplica un color de texto y color de fondo para el texto seleccionado por el usuario dentro de un elemento blockquote. (CSS3).

Como puede observarse, las pseudo-clases pueden aperecer en cualquier parte del selector, pero los pseudo-elementos sólo al final.

Ejemplos

Este texto no tiene ningún propósito razonable, ni aporta absolutamente ningún dato en especial, ya que es un simple relleno. Podría bromear un poco, y reproducir el discurso de un político, un fragmento de la legislación educativa o cualquier otro texto del mismo nivel de erudición, pero, pensándomelo mejor, prefiero dejarlo en este inútil fluir de palabras huecas, que no tiene ningún propósito razonable, ni aporta absolutamente ningún dato en especial, ya que es un simple relleno. Podría bromear un poco, y reproducir el discurso de un político, un fragmento de la legislación educativa o cualquier otro texto del mismo nivel de erudición, pero, pensándomelo mejor, prefiero dejarlo en este inútil fluir de palabras huecas.

Este párrafo en concreto esta pensado para ser muy raro, pero el texto no tiene ningún propósito razonable, ni aporta absolutamente ningún dato en especial, ya que es un simple relleno. Podría bromear un poco, y reproducir el discurso de un político, un fragmento de la legislación educativa o cualquier otro texto del mismo nivel de erudición, pero, pensándomelo mejor, prefiero dejarlo en este inútil fluir de palabras huecas.

Este texto no tiene ningún propósito razonable, ni aporta absolutamente ningún dato en especial, ya que es un simple relleno. Podría bromear un poco, y reproducir el discurso de un político, un fragmento de la legislación educativa o cualquier otro texto del mismo nivel de erudición, pero, pensándomelo mejor, prefiero dejarlo en este inútil fluir de palabras huecas, que no tiene ningún propósito razonable, ni aporta absolutamente ningún dato en especial, ya que es un simple relleno. Podría bromear un poco, y reproducir el discurso de un político, un fragmento de la legislación educativa o cualquier otro texto del mismo nivel de erudición, pero, pensándomelo mejor, prefiero dejarlo en este inútil fluir de palabras huecas, que no tiene ningún propósito razonable, ni aporta absolutamente ningún dato en especial, ya que es un simple relleno. Podría bromear un poco, y reproducir el discurso de un político, un fragmento de la legislación educativa o cualquier otro texto del mismo nivel de erudición, pero, pensándomelo mejor, prefiero dejarlo en este inútil fluir de palabras huecas...

Resultado esperado

CSS2

CSS3

Las imágenes ilustran el aspecto aproximado del ejemplo que deberían mostrar los navegadores con soporte para medios de pantalla CSS2 y CSS3 respectivamente:

El cuerpo de la tabla debe mostrar una sucesión cíclica de colores de fondo por filas (CSS3). El texto de la misma también es de tres colores diferentes, pero dependiendo de las columnas. Por su parte el primer párrafo tras la tabla debe mostrar una primera línea con mayor tamaño de texto que el resto, y una primera letra mayor aún. Los párrafos restantes deben exhibir una sangría de primera línea (CSS3) y comenzar con el caracter "»". Además, el segundo párrafo debería tener un color de fondo diferente (CSS3). No queda reflejado en las imágenes que cualquier elemento h2 debe cambiar su color de fondo al pasar el cursor por encima, que si es destino de un vínculo debe mostrar una línea discontínua en su parte inferior (CSS3) y que cualquier texto seleccionado del ejemplo debe ser de color azul sobre fondo verde (CSS3).

Código HTML empleado (extracto)

<h2 id="Ejemplos">Ejemplos</h2>
<table>
 <tbody>
  <tr>
   <td lang="pt">preto</td>
   <td lang="es">negro</td>
   <td lang="fr">noir</td>
  </tr>
  <tr>
   <td lang="pt">vermelho</td>
   <td lang="es">rojo</td>
   <td lang="fr">rouge</td>
  </tr>
 </tbody>
</table>
<blockquote>
 <p>Este texto no tiene ning&uacute;n...</p>
 <p>... para ser muy raro... </p>
 <p>Este texto no tiene ning&uacute;n ...</p>
</blockquote>

· tierra de nómadas · tallerWeb · debates · recortes · diccionario · búsqueda · contactar ·

Estás en: tierra de nómadas > tallerWeb > Principios básicos de CSS > pseudo-clases y pseudo-elementos

Volver a: Principios básicos de CSS.