Como seleccionar atributos HTML desde CSS3

Después de escribir la otra entrada sobre selectores y de estar viendo las especificaciones de la W3 me ha parecido muy interesante la sección de como poder seleccionar atributos de etiquetas HTML a través de una hoja de estilos.

Los atributos más comunes serían p.class p#id pero también podemos crear estilos en función de los atributos; rel, href, text, button, checkbox, password....

Primero veamos todos los casos posibles y después continuemos viendo uno por uno con más detenimiento:

El[attr];
El[attr = "value"];
El[attr ~= "value"];
El[attr ^= "value"];
El[attr $= "value"];
El[attr *= "value"];
El[attr |= "value"];

El[attr]

En este caso estaríamos accediendo a todos los atributos de ese elemento.

a[href] // Todos los links que tengan atributo href
div[id] // Todos los divs que tengan id

El[attr="value"]

Aquí estaríamos seleccionando el atributo que tiene ese exacto valor. Un ejemplo sería darle a cada link un color diferente en función de su href:

a[href="index.html"] {  
   color: red;
}  
a[href="about.html"] {  
   color: green;
}  
a[href="contact.html"] {  
   color: blue;
}

Otros ejemplos:

div[class="ball"] //Los divs que tengan las clase ball
input[type="text"] //Los inputs del tipo text
input[type="checkbox"] //Los inputs del tipo checkbox

El[attr*="value"]

Que el atributo contenga ese valor en cualquier parte del valor que forma el atributo, redundante pero se verá más claro con los ejemplos:

1-

<h1 rel="xxxexternalxxx">Attribute Contains</h1>
h1[rel*="external"] { color: red; }

2-

<div id="post_1"></div>  
<div id="post_two"></div>  
<div id="third_post"></div>
div[id*="post"]  { color: red; }

El[attr^="value"]

Que el atributo empiece con el valor especificado, un ejemplo en la vida real sería aplicar un estilo a cada link en función de las diferentes webs que enlacen y sin importar si enlaza a la web principal o una sub-página.

Podríamos definir el color de los links de esta manera:

a[href^="http://web_1.com"] { color: red; }  
a[href^="http://web_2.com"] { color: green; }

<a href="http://web1/file.html"> Sería de color rojo
<a href="http://web
1/file_1.html"> Sería de color rojo

El[attr$="value"]

Sería el mismo caso de arriba pero al contrario, es decir que el atributo acabe con el valor dado. Un práctico ejemplo sería añadir un estilo a un link de descarga en función del tipo de archivo que vamos a descargar: PDF, DOC.

a[href$=".pdf"] { background: url(icon-pdf.png) left center no-repeat; padding-left: 30px; }  
a[href$=".doc"] { background: url(icon-doc.png) left center no-repeat; padding-left: 30px; }

El[attr~="value"]

En este caso podremos seleccionar el valor de un atributo que esté separado por espacios, es decir que el atributo posea más de un valor.

<h1 rel="friend external sandwich">Attribute Space Separated</h1>
h1[rel~="external"] { color: red; }

El[attr|="value"]

Aquí seleccionamos el primer valor de un atributo que esté separado por '-'
[attr^="value"] hace lo mismo.

<h1 rel="friend-external-sandwich">Attribute Dash Separated</h1>
h1[rel|="friend"] { color: red; }

El[attr="value"][attr^="value"]

Podemos seleccionar múltiples atributos pero todos deben de apuntar a un único elemento.

<h1 rel="handsome" title="Important note">Multiple Attributes</h1>
h1[rel="handsome"][title^="Important"] { color: red; }

Esto sería todo, stay tunned!!

Camaleón cambia colores, hecho con CSS!!


css-tricks.com/attribute-selectors

comments powered by Disqus