Selectores de atributos – Credito – Texas ~ CosasParaMiBlogs

Aparte de con otras cosas, estos días he estado liado practicando con una vieja pero útil herramienta que nos proporciona CSS desde su segunda versión. Se trata de losselectores de atributos.

Estos selectores pueden hacer las veces de condiciones, para poder aplicar estilo a determinadas etiquetas HTML, pero sólo si tienen cierto contenido en sus atributos. Un ejemplo para que esté más claro.

a[href="http://www.google.es"] {color:#990000;}

La inclusión de esta línea en nuestra hoja de estilo provocará que todas las etiquetasa (anchor) que tengan un atributohref igual ahttp://www.google.es, salgan con una letra de color rojo. O lo que es lo mismo, cada vez que creemos un enlace a la página principal de Google, el texto del enlace saldrá en color rojo de forma automática.

Un selector de atributo tiene la forma

ETIQUETA[ATRIBUTO OPERADOR VALOR] {PROPIEDADES}

En el primer ejemplo, la etiqueta seríaa, el atributohref, el operador= y el valor la dirección de Google. Las propiedades son las habituales de CSS y en el susodicho ejemplo, el color de fuente.

La posibilidad de usar cualquier etiqueta, atributo y valor, así como una suficiente variedad de operadores, es lo que le da fuerza a esta herramienta. Los operadores son los siguientes y harán que el estilo se ejecute en aquellas etiquetas que tengan un atributo:

= exactamenteigual al declarado

input[type="text"] {width: 200px;}

Todos los campos input de formularios que sean del tipo texto, tendrán un ancho de 200px.

^= quecomienza con los mismos caracteres que el declarado

img[title^="categ"] {padding:5px;border:1px solid #000000;}

Todas las imágenes con un título que empiece por la cadena "categ", tendrán un borde negro con unpadding de 5px.

$= quetermina con los mismos caracteres que el declarado

a[href$="jpg"] {background:#cccccc;}

Los enlaces cuya dirección de destino termine con la extensiónjpg, tendrán un fondo gris.

*= quecontiene los mismos caracteres que el declarado

a[href*="oloblogger"] {font-style:italic;}

Los enlaces cuya URL contengan la secuencia de caracteres "oloblogger", apareceran en cursiva.

~= exactamenteigual al declarado, de entre todos los valores que contenga el atributo separados porespacios

link[rel~="alternate"] {...}

No se me ocurre ningún ejemplo de estilo para este operador, pero de entre todas las etiquetaslink, las propiedades se aplicarían a aquellas que dentro del atributorel, tuvieran el valor exacto "alternate", como por ejemplo ocurre enlink href="estilo.css" rel="alternate stylesheet" type="text/css"

|= al principio de una lista de valores separados por guiones

p[lang|="en"] {color:red;}

Los párrafos con marca de lenguaje inglés (en), se verán en rojo como ocurriría en p lang="en-US"...

Si no especificamos operador y por consiguiente, ningún valor, las propiedades se aplicarán a todos los elementos que tengan el atributo declarado.

span[class] {text-align:justify;}

Todas las etiquetasspan que incluyan algún atributoclass (independientemente de su valor), mostrarán texto justificado.

Por último, las selectores pueden ser "sumados", de manera que el estilo sólo se aplicará si se cumplen todas las condiciones:

div[class="resaltado"][id="fondo"] {background:#ffffff; color:blue; font-weight:bold; }

Si undiv tiene simultáneamente la clase y laid indicadas, su contenido se verá con fondo blanco y texto azul en negrita.

Algunos operadores corresponden a CSS3, pero en un principio, todos son soportados por Firefox, Chrome, Safari e Internet Explorer a partir de la versión 7.

CosasParaMiBlogs

miércoles, 16 de junio de 2010

Selectores de atributos – Credito – Texas

Popular Posts

Blogger news

Labels

Blog Archive