¡Foto!

¡Envia tu foto al Fotomaton!

Trucos en patrones de selectores CSS

2 comentarios · 4.616 lecturas · html y css
¿Quien había dicho que el HTML+CSS tiene pocas posibilidades? Es poco conocido, pero existen unos patrones MUY utiles para establecer estilos según nos interese. Totalmente estándar y diseñado por el consorcio W3C. Lo explico a continuación:

Pongamos por ejemplo en este caso, dos enlaces: una página web, y un documento PDF de descarga, que queremos diferenciar visualmente y mediante estilos CSS según ese contenido:

<a href="http://www.google.es" title="web">Ir a google</a>
<a href="http://www.nosolousabilidad.com/cursos/Referencia%20CSS.pdf" title="pdf">Referencia CSS</a>

Esto nos aparecería así, y como podemos ver, no se diferencia en nada uno del otro:

Ir a google
Referencia CSS

El truco pues, reside en especificar con un selector CSS el contenido que tienen esos enlaces. A continuación, el fichero CSS:

a[title="web"] { color : red; }
a[title="pdf"] { color : green; }

Hemos especificado que la etiqueta de enlaces ( a[alt="web"] ), que tenga el atributo de título ( a[title="web"] ) con el valor exacto "web" ( a[title="web"] ) tenga las propiedades que hemos definido entre llaves ( {} ), en este caso el color del texto rojo. Por lo tanto los enlaces quedarían así:

Ir a google
Referencia CSS

Esto, así de simple, no deja de ser una pequeña curiosidad, pero combinandolo con más estilos pueden quedar cosas realmente brillantes:

a[title="web"]:before { content : url("http://www.emezeta.com/pagina.png"); }
a[title="pdf"]:before { content : url("http://www.emezeta.com/ficheropdf.png"); }


Este ejemplo, coloca un icono previamente creado de una página web (pagina.png), o de un fichero PDF (ficheropdf.png) antes de los enlaces. Asi el usuario sabrá a donde apunta el enlace, antes de pinchar sobre el o de mover el ratón sobre el hipervinculo. Se me ocurren cosas tan interesantes como una combinación de un :hover de un enlace y un cursor para el ratón, para que al mover nuestro ratón sobre un enlace en lugar de la flecha del cursor, nos aparezca un icono de Acrobat, una pequeña foto indicando que el enlace es una imagen, o el icono del emule si es un enlace ed2k.

Más interesante aún es que en el CSS2 el W3C incluye la posibilidad de hacer encajar un enlace con varios patrones usando ~= en lugar de = ( a[title~="web"] ). De esta forma, si en el atributo alt del enlace añadimos varias palabras separadas por un espacio (ejemplo: title="web pdf"), el buen navegador captaría las propiedades de los dos codigos CSS que habíamos visto.

Finalmente, también podríamos irnos un poco más allá, hasta el CSS3 y usar las combinaciones de expresiones regulares en CSS, que sin duda son mucho más utiles:

a[href^="ed2k://"]:before { content : "Descarga emule: "; }
a[href$=".doc"]:before { content : "Descarga word: "; }


En el primero de los casos estamos aplicando el estilo a los enlaces con el atributo alt que comience por ed2k:// (descarga emule o similar), y en el segundo estamos centrandonos en los enlaces que finalicen en la extensión .doc.

2 comentarios ▼ · Escrito el 5-Jun-2005 · Ver menciones
Recomendar por correo · Meneame · Añadir a del.icio.us

Artículos relacionados

2 Comentarios

#1 Publicado hace 3 años
milhouse Lector
Navegando con Internet Explorer
Bajo Windows 98/98SE

Quiero saver como aser votones como los de ustedes como lo s del meni esos que disen rss articulos mas leidos

#2 Publicado hace 2 años
The Viejo Lector
Navegando con Internet Explorer
Bajo Windows XP

Genial nunca me acuesto sin saber algo nuevo. Voy ha hacer algunos ejercicios a ver como me sale la cosa.

Deja tu comentario

en Internet.

Consejos

  • Los comentarios fuera del tema del artículo (OFF-TOPIC) serán eliminados.
  • Escribir completamente en MAYUSCULAS en Internet equivale a GRITAR y está mal visto.
  • No utilices lenguaje SMS, en Emezeta no te cobramos por letras escritas.
  • No hagas publicidad de tu página o dejes enlaces en el comentario para aumentar el PR o la popularidad en buscadores. En Emezeta se aplica el tag nofollow, que hace que Google ignore esos enlaces.
  • No insultes. Al escribir un comentario tus datos quedan almacenados y serás el único responsable de tus palabras. Se permite la libertad de expresión y de opinión, pero no los comentarios ofensivos.
  • Puedes insertar algunas etiquetas HTML en los comentarios: em, a href, b, i, em, code, acronym y strong.
  • Es posible añadir una foto junto a tus comentarios, para ello sólo tienes que personalizarla en Gravatar. [?]

Envía tu foto

Fotomatón Emezeta

Envia tu fotografía al fotomatón de Emezeta. Puedes enviar varias y saldrás en la portada de Emezeta.


Artículo de http://www.emezeta.com/

10 consultas efectuadas / Página generada en 0.043 segundos

Programado íntegramente por José Román (Manz) en XHTML y CSS estándar.

Sindicado bajo Feed RSS. Contenido bajo licencia Creative Commons

Estadísticas de visitas · Términos y condiciones · Contacto · Publicidad · Preguntas frecuentes (FAQ)