En CSS1, el estilo normalmente se asocia con un elemento según la posición de éste en la estructura del elemento. Este modelo simple es suficiente para una amplia variedad de estilos, pero no cubre algunos efectos comunes. El concepto de pseudo-clases y pseudo-elementos extiende los modos de referencia de CSS1 para permitir que informaciones externas tengan influencia a la hora de dar formato.
Las pseudo-clases y los pseudo-elementos pueden usarse en CSS como selectores, pero no existen en el código fuente HTML, sino que son "insertados" por el AU bajo ciertas condiciones para que las hojas de estilo puedan hacer referencia a ellos. Se hace referencia a ellos como "clases" y como "elementos" ya que esta es una manera conveniente de describir su comportamiento. Más concretamente, su comportamiento se define mediante una secuencia ficticia de etiquetas.
Los pseudo-elementos se utilizan para hacer referencia a sub-partes de elementos, mientras que las pseudo-clases permiten a las hojas de estilo diferenciar entre distintos tipos de elementos.
Los Agentes de Usuario suelen representar los vínculos aún no visitados de manera distinta a los ya visitados. En CSS1, se puede actuar sobre esto a través de pseudo-clases del elemento 'A':
A:link { color: red } /* vínculos no visitados */
A:visited { color: blue } /* vínculos visitados */
A:active { color: lime } /* vínculos activos */
Todos los elementos 'A' que tengan un atributo 'HREF' serán colocados en uno y sólo uno de estos grupos (es decir, los vínculos destino no se ven afectados). Los AAUU pueden elegir mover un elemento de 'visited' a 'link' al cabo de un cierto tiempo. Un vínculo 'active' es uno que está siendo seleccionado en ese momento por el lector (p.ej., haciendo clic con un botón del ratón).
Una pseudo-clase de vínculo se trata como si la clase se hubiera insertado manualmente. No es necesario que un AU reformatee un documento mostrado actualmente a causa de transiciones entre pseudo-clases de vínculo. P.ej., una hoja de estilo puede especificar legalmente que el 'font-size' de un vínculo 'active' debería ser mayor que el de un vínculo 'visited', pero no es necesario que el AU reformatee dinámicamente el documento cuando el lector seleccione el vínculo 'visited'.
Los selectores de pseudo-clases no hacen referencia a clases normales, y viceversa. Por tanto, la regla de estilo del ejemplo siguiente no tendrá ninguna influencia:
A:link { color: red }
<A CLASS=link NAME=target5> ... </A>
En CSS1, las pseudo-clases de vínculo no tendrán ningún efecto en elementos que no sean 'A'. Por lo tanto, el tipo de elemento puede omitirse del selector:
A:link { color: red }
:link { color: red }
Estos dos selectores seleccionarán en CSS1 los mismos elementos.
Los nombres de pseudo-clases no requieren coincidencia de mayúsculas y minúsculas.
Las pseudo-clases pueden utilizarse en selectores contextuales:
A:link IMG { border: solid blue }
Asimismo, las pseudo-clases pueden combinarse con las clases normales:
A.external:visited { color: blue }
<A CLASS=external HREF="http://fue.ra/">vínculo externo</A>
Si el vínculo de este ejemplo ha sido visitado, será mostrado en azul. Obsérvese que los nombres de las clases normales preceden a las pseudo-clases en el selector.
Algunos efectos tipográficos comunes están asociados no con elementos estructurales, sino más bien con elementos tipográficos resultantes del formato del documento en el lienzo. En CSS1 se puede hacer referencia a dos de estos elementos tipográficos a través de pseudo-elementos: la primera línea de un elemento, y la primera letra.
CSS1 básico: Los AAUU pueden no tener en cuenta las reglas que contegan ':first-line' o ':first-letter' en el selector, o, alternativamente, soportar sólo parte de las propiedades de estos pseudo-elementos. (Véase la sección 7.)