Pseudo-element en CSS

Valoración del artículo:
Vamos a conocer los Pseudo-elementos en hojas de estilo en cascada, que sirven para definir estilos para la primera línea o letra de un texto.
Publicado: 22/4/05
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
Los pseudo-element (pseudo-elementos, si se me permite la traducción al castellano) sirven para aplicar estilos a partes más específicas dentro de una etiqueta. Es decir, para el ejemplo concreto de la etiqueta párrafo, con los pseudo-elementos podemos definir el estilo para la primera letra del párrafo y para la primera línea.

Pseudo-element first-letter

Un efecto habitual de algunas publicaciones, por ejemplo las de cuentos para niños, es hacer más grande la primera letra de una página y decorarla de alguna manera. Con CSS podemos aplicar estilos específicos y hacer, por ejemplo, que esa primera letra sea más grande y tenga un color distinto del resto del párrafo.

Se utiliza de esta manera:

P:first-letter {
font-size: 200%;
color: #993333; font-weight: bold;
}


Así estamos asignando un tamaño de letra 200% más grande del propio del párrafo. También estamos cambiando el color de esa primera letra.

De entre todas las propiedades de estilos, sólo algunas se pueden aplicar a los pseudo-elementos first-letter. Son las siguientes, según la especificación del W3C: font properties, color properties, background properties, 'text-decoration', 'vertical-align' (sólo si 'float' está asignado a 'none'), 'text-transform', 'line-height', margin properties, padding properties, border properties, 'float', 'text-shadow' y 'clear'.

Se puede ver un ejemplo de aplicación de un estilo con first-letter.

Pseudo-element first-line

Como adelantaba, este pseudo-elemento, sirve para asignar un estilo propio a la primera línea del texto. Es posible que hayamos visto alguna revista o periódico que utilice este estilo para remarcar las primeras líneas del párrafo. Un ejemplo de su uso sería el siguiente:

P:first-line {
   text-decoration: underline;
   font-weight: bold;
}


Las propiedades de estilos que se pueden aplicar al pseudo-element first-line son las siguientes: font properties, color properties, background properties, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' y 'clear'.

Se puede ver un ejemplo de aplicación de un estilo con first-line.

Uso de clases con los pseudo-elementos

En determinadas ocasiones podemos necesitar crear una clase (class) de CSS a la que asignar los pseudo-elementos, de modo que estos no se apliquen a todas las etiquetas de la página. Por ejemplo, podemos desear que solamente se modifique el estilo de la primera línea del texto en algunos párrafos y no en todos los de la página.

Una clase se define con el nombre de la etiqueta seguido de un punto y el nombre de la clase. Si además deseamos definir un pseudo-elemento, deberíamos indicarlo a continuación, con esta sintaxis:

P.nombreclase:first-line {
    font-weight: bold;
}


Pseudo-elementos en CSS2

Aparte de first-line y first-letter, en las especificaciones de CSS 2 existen otros pseudo elementos que voy a nombrar para conocimiento de los lectores, aunque profundizaré en su uso. Se tratan de before y after y sirven para insertar "contenidos generados" antes y después del elemento al que asignemos estos pseudo-element.

Un ejemplo de ello es:

P.nota:before {
    content: "Nota: "
}


Así se ha definido una clase de párrafo llamada "note" en la que se indica que antes de la propia nota se debe incluir el texto indicado, osea, "Nota: ".

Atención a la compatibilidad con CSS2, que, por lo menos para estos elementos, no está soportada en versiones 6 de Internet Explorer. Firefox, en cambio, sí que es compatible con estas características de CSS2.

Comentarios
Fueron enviados 2 comentarios al artículo
1 comentario no revisado
1 comentario revisado:
Por: Dave
29/4/05
Solo comentar unos detalles :

Los Pseudo-elements (Pseudo elementos, si se permite la traduccion xD) y las pseudo-class (pseudo clases) son "Case Sensitive" , es decir, que no es lo mismo escribirlas en minusculas que en mayusculas. Se interpretarán como 2 pseudo-elements y/o pseudo-class distintas, aun conteniendo los mismos valores.

2 o más pseudo-class se pueden aplicar a un objeto al mismo tiempo(tabla, capa, lista, parrafo, etc...) Existe un "orden de cascada" que atiende a varios criterios como por ejemplo el orden alfabetico de la declaracion de los pseudo-class, la prioridad entre las clases (aunque se consideran objetos normales), pero ocurre como con los operadores, que hay prioridad de ejecucion (primero aritmeticos,de comparacion y por ultimo logicos). En los pseudo-class y pseudo-elements ocurre igual, aunque desconozco el criterio en concreto.

Un saludo.


Manuales relacionados
Categorias relacionadas
El autor
Lectura recomendada
Compra este libro en Agapea, la librería urgente a domicilio.
Últimas noticias
Alojados en el grupo