En este último tutorial sobre selectores, te presentaré un tipo muy especial de selectores. Se trata de las llamadas pseudo-clases y pseudo-elementos. Se trata de selectores que no se refieren a elementos HTML específicos, sino que son generados por el dispositivo de salida.
Las pseudoclases y los pseudoelementos pueden utilizarse para definir declaraciones de componentes HTML que no pueden describirse claramente mediante un elemento HTML. Ejemplos típicos son un hipervínculo sobre el que se acaba de hacer clic o un hipervínculo que aún no ha sido visitado.
Diseño de hipervínculos
Muy a menudo se desea diseñar los hipervínculos de la página. CSS ofrece numerosas opciones para ello, que pueden utilizarse para tratar los distintos estados de los hipervínculos y, en última instancia, personalizarlos visualmente.
Por ejemplo, si quieres asignar un color rojo a un hipervínculo, quedaría así
a:link { color: rojo; }
Con a:visited, en cambio, se marcan los hipervínculos que ya han sido visitados. La siguiente sintaxis puede utilizarse para mostrar en color azul los hipervínculos sobre los que ya se ha hecho clic.
a:visited { color:azul; text-decoration:none; }El aspecto en el navegador es el siguiente:
Si desea diseñar por separado los hipervínculos sobre los que se está haciendo clic en ese momento, también es posible.
a:active { font-weight: bold; color: azul; text-decoration: none; }
Para ello se utiliza la sintaxis a:active.
La sintaxis a:hover, en cambio, se refiere al estado en el que el puntero del ratón se desplaza sobre el hipervínculo. También existe otro pseudoelemento con a:focus. Describe el momento en el que el hipervínculo recibe el foco.
Otros pseudoelementos
Existen pseudoelementos que pueden utilizarse para dirigirse a partes de otros elementos. Un ejemplo típico es ::first-letter. Este pseudoelemento selecciona el primer carácter del elemento actual. Puede utilizarse para todos los elementos que contengan texto. Pero cuidado: los pseudoelementos sólo pueden anotarse al final de todos los selectores. Por lo tanto, deben colocarse antes de la llave de apertura.
h1::primera-letra { color: azul; }
La primera línea de un elemento puede direccionarse mediante ::primera-línea. Este pseudoelemento sólo es aplicable a los elementos de nivel de bloque. Un ejemplo:
p::primera-línea { fondo-azul; }
Y este es el resultado en el navegador
en
Los dos pseudoelementos :after y :before pueden utilizarse para mostrar contenido adicional antes y después de un elemento. El contenido determina lo que se va a mostrar.
- normal - el pseudoelemento definido en la regla no se genera.
- none - no se genera el pseudoelemento.
- <cadena> - se muestra la cadena de caracteres especificada aquí. Las cadenas deben ir entre comillas simples o dobles.
- <uri> - se inserta el recurso especificado bajo el URI.
- <contador> - define un contador o se dirige a un contador específico.
- attr(<identificador>) - se inserta el valor del atributo especificado entre paréntesis.
- close-quote - inserta una coma invertida de cierre.
- no-close-quote - no se inserta una coma invertida de cierre, pero la profundidad de anidamiento se incrementa en uno.
- no-open-quote - no se inserta una coma invertida de apertura, pero la profundidad de anidamiento se incrementa en uno.
- open-quote - se inserta una coma de apertura.
Ejemplo
ul li:before { contenido: uri("bullet.gif"); }
CSS3 también ha introducido el pseudoselector :not. Esto hace que sea muy fácil seleccionar contenido específico. Un primer ejemplo debería mostrar lo poderoso que es este pseudo selector. Supongamos que desea seleccionar todos los hipervínculos que no tienen un atributo href. La sintaxis correspondiente sería la siguiente
a:not([href])
Los hipervínculos "normales" no se verían afectados por esta sintaxis. Sin embargo, sería posible acceder a las definiciones de los anclajes.
<a name="top">Inicio de página</a>
Un ejemplo algo más detallado debería ilustrar el funcionamiento de :not. Se han definido varios párrafos de texto dentro de un documento.
<body> <h1>PSD-Tutoriales.de</h1> <p>Esto es un párrafo.</p> <p>Esto es otro párrafo.</p> <div>Esto es un área de texto.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutoriales.de</a> </body>
Además de los párrafos de texto marcados con p, también hay un área div y un hipervínculo. Ahora debería ocurrir lo siguiente:
- Todos los párrafos marcados con p obtienen un color de fuente negro.
- Donde no haya párrafos marcados con p, se utiliza el rojo como color de fuente.
La sintaxis CSS correspondiente es la siguiente:
p { color:#000; } :not(p) { color:#ff0000; }El principio de herencia
Una de las cosas más importantes a la hora de entender las definiciones CSS es la herencia. De hecho, en CSS, las propiedades de estilo se heredan de un elemento a otro.
Por ejemplo
html { color: rojo }Esta definición asigna el color rojo de primer plano al elemento html.
Debido al principio de herencia, esta definición de color también se aplica a todos los elementos subordinados a html. Esto significa que todos los elementos por debajo de html se muestran en rojo por defecto. La ventaja de esta variante es que no es necesario definir explícitamente el rojo como color para estos elementos. Pero, ¿y si el contenido de los párrafos p no debe mostrarse en rojo? Entonces hay que sobrescribir la definición de color superior de HTML.
html { color: rojo; } p { color: #000; }
¿Qué ocurre si hay dos elementos p y div?
<body> <p>PSD-Tutoriales.de</p> <div>Mundo</div> </body>
El resultado tiene este aspecto:
La definición de color de html sólo afecta al contenido de div. En cambio, el párrafo p se muestra en negro.
En CSS, hay diferentes maneras de especificar definiciones de estilo. Esta es también la razón por la que puede haber instrucciones contradictorias para un elemento. CSS proporciona un principio de ponderación para estos casos. Este principio determina cuál de las instrucciones para un elemento tiene prioridad. No quiero entrar aquí en grandes detalles sobre este principio. Sin embargo, puedes encontrar información detallada al respecto en http://wiki.selfhtml.org/wiki/CSS/Kaskade o en http://www.thestyleworks.de/basics/cascade.shtml.
Mi objetivo es mostrarle a qué debe prestar atención cuando defina propiedades CSS. El siguiente ejemplo sirve a este propósito:
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutoriales.es</title> <meta charset="UTF-8" /> <style> body { font-family:Arial, Helvetica, Serif; font-size: 90%; } p { color: #000; } h1 { font-size: 120%; font-weight: normal; } strong { color:#CCCCCC; } h2 strong { color: rojo; } </style> </head> <body> <div> <h1>PSD-Tutoriales.es</h1> <p>Este es un párrafo con una <strong>palabra en negrita</strong>.</p> <h2>Este es un encabezado con una <strong>palabra en negrita</strong>.</h2> </div> </body> </html>.En el navegador se ve así:
Como puedes ver, las palabras marcadas con strong, por ejemplo, tienen un formato diferente. El tipo de formato utilizado depende en última instancia del orden de las definiciones.
Alternativamente, también existe la palabra clave !important, que se puede utilizar para marcar una instrucción CSS como particularmente importante.
<style> body { font-family:Arial, Helvetica, Serif; font-size: 90%; } p { color: #000; } h1 { font-size: 120%; font-weight: normal; } strong { color:#CCCCCC !important; } h2 strong { color: rojo; } </style>De nuevo, eche un vistazo al resultado:
En este contexto, asegúrese de leer a través de las fuentes mencionadas en este tutorial de nuevo. (Incluso si ciertamente no necesita profundizar demasiado en este tema para empezar).
