Manual de CSS

 
 
 

Mapa Web

 
borde   borde
Portada arrow Pseudo-clases y Pseudo-elementos

 

Pseudo-clases y Pseudo-elementos Imprimir E-mail

Permite la asignación de estilos a estructuras, estados de los elementos o estados del propio documento, las cuales no deben estan definidas en la estructura del propio documento.

Pseudo-Clases

En el caso de los enlaces, algunos de ellos hacen referencia a páginas que ya han sido o no visitadas. No hay ninguna forma posible de poder formatear de forma diferente estos tipos de enlaces en HTML, para ello utilizamos unas estrucuturas virtuales que no se corresponden con ningún objeto del documento HTML, conocidas como pseudo-clases.

En CSS1, hay sólo tres pseudo-clases:

  • :link. Hace referencia a cualquier enlace no visitado de la página.

  • :visited. Hace referencia a cualquier enlace ya visitado de la página.

  • :active. Hace referencia al enlace en el que estamos haciendo click en este momento o estamos activando. En CSS1 sólo se puede definir esta propidedad sobre los enlaces, mientras que en CSS2 esta propiedad se aplica a cualquier elemento.

Pseudo-Elementos

En CSS1, hay dos pseudo-elementos que son :first-letter and :first-line. Se utilizan para dar estilo a la primera letra de un elemento de bloque (un párrafo por ejemplo) y a su primera línea respectivamente. Ejemplo:

 

P:first-letter {color: red;} P:first-line {color: gray;}

Restricciones en las Pseudo-Clases y los Pseudo-Elementos

Cuando aplicamos un pseudo-elemento sólo podemos emplear en su definición, los siguientes estilos:

  • :first-letter

    • propiedades de las fuentes

    • fondos y colores

    • text-decoration

    • vertical-align (si float es none)

    • text-transform

    • line-height

    • margenes

    • padding

    • bordes

    • float

    • clear

  • :first-line

    • propiedades de las fuentes

    • fondos y colores

    • word-spacing

    • letter-spacing

    • text-decoration

    • vertical-align

    • text-transform

    • line-height

    • clear

En CSS1, no podemos combinar una pseudo-clase y un pseudo-elemento para la misma definición de estilo. Esto cambia en CSS2, aunque la sintaxis de definición es bastante rígida.

Capítulo anterior:
El Atributo Class y el Atributo ID

Capítulo siguiente:
Estructura y Herencia



 

 
Portada
Capítulos del Manual de CSS
Introducción a CSS
El Tag LINK
El Tag STYLE y la directiva @import
Comentarios CSS y Reglas Básicas
Agrupación de Selectores y Declaraciones
El Atributo Class y el Atributo ID
Pseudo-clases y Pseudo-elementos
Estructura y Herencia
Especificidad y Estilos en Cascada
Clasificación de los elementos y Colores
Unidades
Identación
Alineación
Espacios en Blanco
Anchura de Líneas
Alineación Vertical
Espacio entre Palabras y entre Letras
Transformación del Texto
Decoración del Texto
Practicar en línea
Lista de prácticas en línea
FAQ
Preguntas frecuentes
Códigos CSS
Lista de Códigos CSS
Foros
Foros CSS
Otros Manuales
Manuales de otros lenguajes
 
   
 
 
Alojamiento web en Hostalia