Novedades CSS3: selector atributo
Última actualización el Martes, 25 de Mayo de 2010 08:11 Escrito por Susanna
Web - CSS - 1861 lecturas
Selector de atributo
Permite seleccionar un elemento en base a la presencia de un atributo y de su valor. En CSS 2.1 existían 4 variantes de este tipo de selector. En CSS 3 se han añadido 3 más. A continuación se muestran ejemplos de uso de cada uno de ellos.
[att]{...}
Representa un elemento con el atributo att, sea cual sea su valor. Por ejemplo:
h1 [title]{ ... } /* aplica a todos los <h1> con el atributo title establecido */
[att=val]{...}
Representa un elemento cuyo valor del atributo att es val. Por ejemplo:
a[hreflang="es"]{ ... }
/* aplica a los <a> cuyo atributo hreflang es exáctamente "es" */
libro[autor="Pepito"][aniopub="2010"] { ... }
/* aplica a todos los <libro> cuyo atributo autor es exáctamente "Pepito" y aniopub es "2010" */
[att˜=val]{...}
Representa un elemento cuyo valor de atributo att contiene una lista de palabras separadas por espacios en blanco, una de las cuales es val. Por ejemplo:
a[rel~="copyright"] { ... }
/* aplica a <a> cuyo atributo rel contiene el valor “copyright” */
[att|=val]{...}
Representa un elemento cuyo valor de atributo att es val o val-. Por ejemplo:
a[hreflang|="es"] { ... }
/* aplica a <a> cuyo atributo hreflang contiene el valor “es” o "es-" */
Nuevos selectores de atributo en CSS 3
CSS 3 introduce 3 nuevas variantes del selector de atributo. Éstas son:
[att^=val]{...}
Representa un elemento cuyo atributo att comienza con el prefijo val. Por ejemplo:
object[type^="image/"]
/* aplica a <object> cuyo atributo type comienza con el valor “image” */
[att$=val]{...}
Representa un elemento cuyo atributo att termina con el sufijo val. Por ejemplo:
a[href$=".html"]
/* aplica a <a> cuyo atributo href termina con el valor “.html” */
[att*=val]{...}
Representa un elemento cuyo atributo att presenta por lo menos una aparición de la subcadena val. Por ejemplo:
p[title*="hello"]
/* aplica a <p> cuyo atributo title contiene alguna aparición de la caden "hello" */