Hace unos dias hablamos sobre los selectores de tipo en CSS2, que sin duda pueden resultar muy útiles para simplificar nuestro código.

Hoy le toca el turno a los selectores de atributo.

Se trata de seleccionar etiquetas de nuestro HTML dependiendo de los atributos tenga asignados y los valores de estos.

Lo mejor será verlo con unos ejemplos, asi que para empezar a jugar un poco de HTML.

Se muestran tres lineas, en principio identicas, con el texto "HTML 4.0", hemos usado la etiqueta acronym, asi que al dejar unos segundos el puntero del ratón sobre ellas aparecerá un tooltip (un cartelito amarillo) con el valor del atributo title.

Tal que así:

HTML 4.0

HTML 4.0

HTML 4.0

La etiqueta acronym es similar a abbr, y son una de esas etiquetas poco conocidas que nos pueden dar toquecito "de calidad" a nuestro trabajo.

Pero bueno, CSS nos permite acceder a un etiqueta según que atributos tenga asignados.

Escribe en rojo el contenido de todas la etiquetas que tengan asignado el atributo title, de la misma forma que

lo hace solo con las etiquetas acronym con el atributo title asignado.

Tambien podemos seleccionar una etiqueta según el valor otorgado a un atributo, así:

Esto escribe en rojo solo la primera de nuestras tres líneas

Cuando el valor son varias palabras separadas por espacios, debemos entrecomillarlos en el selector, (da lo mismo comillas simples que dobles):

Pero no queda aqui la cosa, si todo esto te ha parecido insuficiente, o si simplementes quieres lucirte un poco, aun quedan dos balas en la recamara.

Primero, podemos seleccionar una etiqueta si su valor son varias palabras, separadas por espacios, por cualquiera de ellas, así

Que seleccionaria todas las etiquetas en cuyo atributo title aparezca la palabra 'Marked' (Marked, no MARKED, ni marked, ni MaRkEd, hasta ahí podíamos llegar!!)

Por cierto, el carácter ~ se llama tilde (aka bigotillo, sombrerito de la ñ) y se consigue con un Alt + 126.

Segundo, si lo que tenemos como valor es una lista de palabras separadas por un guión, podemos acceder a ella mediante la primera (solo la primera) de todas ellas, así:

Con lo que seleccionamos todas las etiquetas cuyo atributo title sea una lista de palabras separadas por un guion que empiezen por Hiper.

El carácter | se llama pipe o tubería y es un AltGr + 1, al menos en un PC (ni idea de como sacarlo con MAC)

De entrada esto puede parecer un poco inutil, al menos a mi me lo parece, pero pensando un poco seguro que se nos ocurre alguna aplicación má "terrenal" que la explicació que aparece en la recomendación del W3C:

“Esto está pensado principalmente para permitir equivalencias con el sub-código del lenguaje (ej., el atributo "lang" en HTML) tal como se describe en RFC 1766 ([RFC1766])
”

Demasiado para mi.

Para terminar decir que por supuesto se admiten selectores del tipo:

para seleccionar cajas de texto con un valor por defecto asignado.

Problemas con Internet Explorer

Todos, si estas trabajando con frontpage, y crees que Bill Gates inventó Internet o no piensas que El Maligno (aka IE) es el único navegador que existe, has perdido unos minutos preciosos de tu vida leyendo esto.

En cambio, si aporreas emacs, mientras navegas con Links, tambien has perdido el tiempo, pero al menos hemos aprendido algo ¿no?

Al menos, eso espero...