Selector Atribut

El selector attribute CSS coincideix amb elements basats en la presència o el valor d'un atribut donat.

/* <a> elements amb l'atribut title */
a[title] {
  color: purple;
}

/* elements <a> amb una coincidència href "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* elements <a> amb un href contenint "example" */
a[href*="example"] {
  font-size: 2em;
}

/* elements <a> amb un href amb una terminació ".org" */
a[href$=".org"] {
  font-style: italic;
}

[attr]

Representa un element amb un nom d'atribut attr.

[attr=value]

Representa un element amb un nom d'atribut attr el valor del qual és exactament value.

[attr~=value]

Representa un element amb un nom d'atribut attr el valor del qual és una llista de paraules separades per espais en blanc, una de les quals és exactament value.

[attr|=value]

Representa un element amb un nom d'atribut attr el valor del qual pot ser exactament value o pot començar amb value immediatament seguit d'un guió, - (U+002D). Sovint s'utilitza per coincidències de subcodis de llenguatge.

[attr^=value]

Representa un element amb un nom d'atribut attr el valor del qual està prefixat (precedit) per value.

[attr$=value]

Representa un element amb un nom d'atribut attr el valor del qual és sufix (següit) per value.

[attr*=value]

Representa un element amb un nom d'atribut attr el valor del qual conté almenys una ocurrència value dins de la cadena.

[attr operator value i]

En afegir una i (o I) abans del claudàtor de tancament, el valor es compara entre majúscules i minúscules (per a caràcters dins del rang ASCII).

CSS

a {
  color: blue;
}

/* Internal links, beginning with "#" */
a[href^="#"] {
  background-color: gold;
}

/* Links with "example" anywhere in the URL */
a[href*="example"] {
  background-color: silver;
}

/* Links with "insensitive" anywhere in the URL,
   regardless of capitalization */
a[href*="insensitive" i] {
  color: cyan;
}

/* Links that end in ".org" */
a[href$=".org"] {
  color: red;
}

HTML

<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>

Resultat

CSS

/* Tots els divs amb un atribut `lang` són en negreta. */
div[lang] {
  font-weight: bold;
}

/* Tots els divs en US Anglès són blaus. */
div[lang~="en-us"] {
  color: blue;
}

/* Tots els divs en Portuguès són verds. */
div[lang="pt"] {
  color: green;
}

/* Tots els divs en Xinès són vermells, ja sigui
   simplificat (zh-CN) o tradicional (zh-TW). */
div[lang|="zh"] {
  color: red;
}

/* Tots els divs en Xinès Traditional
   `data-lang` són porpra */
/* Nota: També podeu utilitzar atributs amb guions sense cometes dobles */
div[data-lang="zh-TW"] {
  color: purple;
}

HTML

<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好！</div>
<div lang="zh-TW">世界您好！</div>
<div data-lang="zh-TW">?世界您好！</div>

Resultat