--- title: Attribute selectors slug: Web/CSS/Attribute_selectors tags: - CSS - Reference - Selettori - Selettori di attributo translation_of: Web/CSS/Attribute_selectors ---
{{CSSRef}}

Il selettore di attributo CSS corrisponde agli elementi in base alla presenza o al valore di un dato attributo.

/* Elemento <a> con un attributo title */
a[title] {
  color: purple;
}

/* Elemento <a> con un href uguale a "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* Elemento <a> con un href contenente "example" */
a[href*="example"] {
  font-size: 2em;
}

/* Elemento <a> con un href che finisce con ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* Elemento <a> il cui attributo classe contiene la parola "logo" */
a[class~="logo"] {
  padding: 2px;
}

Sintassi

[attr]
Rappresenta elementi con un nome di attributo attr.
[attr=value]
Rappresenta elementi con un nome di attributo attr il cui valore è esattamente value.
[attr~=value]
Rappresenta elementi con un nome di attributo attr il cui valore è una lista di parole separate da spazi, una delle quali è esattamente value.
[attr|=value]
Rappresenta elementi con un nome di attributo attr il cui valore può essere esattamente value o può iniziare con value immediatamente seguito da un trattino, - (U+002D). È spesso usato per corrispondenze di subcode di linguaggio.
[attr^=value]
Rappresenta elementi con un nome di attributo attr il cui valore è il prefisso (è preceduto da) di value.
[attr$=value]
Rappresenta elementi con un nome di attributo attr il cui valore è il suffisso (è seguito da) di value.
[attr*=value]
Rappresenta elementi con un nome di attributo attr il cui valore contiene almeno una presenza di value all'interno della stringa.
[attr operator value i]
Aggiungere una i (o I) prima della parentesi di chiusura fa sì che il valore sia comparato senza distinzione tra maiuscole e minuscole (per caratteri entro il range ASCII).
[attr operator value s] {{Experimental_Inline}}
Aggiungere una s (o S) prima della parentesi di chiusura fa sì che il valore sia comparato con sensibilità alle maiuscole ( per caratteri entro il range ASCII).

Esempi

CSS

a {
  color: blue;
}

/* Link interni che iniziano con "#" */
a[href^="#"] {
  background-color: gold;
}

/* Link con "example" in qualsiasi punto dell'URL */
a[href*="example"] {
  background-color: silver;
}

/* Link con "insensitive" in qualsiasi punto dell'URL,
   a prescindere dalla capitalizzazione*/
a[href*="insensitive" i] {
  color: cyan;
}

/* Link con "cAsE" in qualsiasi punto dell'URL,
con precisa capitalizzazione */
a[href*="cAsE" s] {
  color: pink;
}

/* Link che finiscono con ".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>

Risultato

{{EmbedLiveSample("Links")}}

Linguaggi

CSS

/* Tutti i div con attributo `lang` sono bold. */
div[lang] {
  font-weight: bold;
}

/* Tutti i div senza un attributo `lang` sono italicized. */
div:not([lang]) {
  font-style: italic;
}

/* Tutti i div in Inglese US sono blu. */
div[lang~="en-us"] {
  color: blue;
}

/* Tutti i div in Portoghese sono verdi. */
div[lang="pt"] {
  color: green;
}

/* Tutti i div in Cinese sono rossi, sia che siano
   in cinese semplificato (zh-CN) o tradizionale (zh-TW). */
div[lang|="zh"] {
  color: red;
}

/* Tutti i div con un
   `data-lang` in Cinese tradizionale sono viola. */
/* Nota: Gli attributi con trattino possono essere usati
  senza virgolette */
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>

Risultati

{{EmbedLiveSample("Languages")}}

Liste ordinate HTML

La specifica HTML richiede che l'attributo {{htmlattrxref("type", "input")}} venga definito senza distinzione maiuscole-minuscole poiché esso è principalmente usato in elementi HTML {{HTMLElement("input")}}, provare ad usare selettori di attributo con l'attributo {{htmlattrxref("type", "ol")}} di un {{HTMLElement("ol", "ordered list")}} non funziona senza il modificatore case-sensitive.

CSS

/* I tipi di lista richiedono un modificatore sensibile alle maiuscole a causa di una stranezza nel modo in cui l'HTML gestisce l'attributo type. */
ol[type="a"] {
  list-style-type: lower-alpha;
  background: red;
}

ol[type="a" s] {
  list-style-type: lower-alpha;
  background: lime;
}

ol[type="A" s] {
  list-style-type: upper-alpha;
  background: lime;
}

HTML

<ol type="A">
  <li>Example list</li>
</ol>

Risultato

{{EmbedLiveSample("HTML_ordered_lists")}}

Specifiche

Specifica Stato Commenti
{{SpecName("CSS4 Selectors", "#attribute-selectors", "attribute selectors")}} {{Spec2("CSS4 Selectors")}} Aggiunge il modificatore per la selezione di valori ASCII case-sensitive e case-insensitive negli attributi.
{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}} {{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}} {{Spec2("CSS2.1")}} Definizione iniziale

Compatibilità Browser

{{Compat("css.selectors.attribute")}}

Vedi anche