CSS Selettori di attributi


Esempio

Panoramica

I selettori di attributi possono essere utilizzati con vari tipi di operatori che modificano di conseguenza i criteri di selezione. Selezionano un elemento utilizzando la presenza di un determinato attributo o valore di attributo.

Selettore (1) Elemento abbinato Seleziona elementi ... Versione CSS
[attr] <div attr> Con attributo attr 2
[attr='val'] <div attr="val"> Dove l'attributo attr ha valore val 2
[attr~='val'] <div attr="val val2 val3"> Dove val appare nel
lista separata da spazi di attr
2
[attr^='val'] <div attr="val1 val2"> Dove il valore di attr inizia con val 3
[attr$='val'] <div attr="sth aval"> Dove il valore di attr termina con val 3
[attr*='val'] <div attr="somevalhere"> Dove attr contiene val ovunque 3
[attr|='val'] <div attr="val-sth etc"> Dove il valore di attr è esattamente val ,
o inizia con val e immediatamente
seguito da - (U + 002D)
2
[attr='val' i] <div attr="val"> Dove attr ha valore val ,
ignorando il rivestimento delle lettere di val .
4 (2)

Gli appunti:

  1. Il valore dell'attributo può essere circondato da virgolette singole o doppie virgolette. Nessuna virgola può anche funzionare, ma non è valida secondo lo standard CSS ed è scoraggiata.

  2. Non esiste un'unica specifica CSS4 integrata, perché è divisa in moduli separati. Tuttavia, ci sono moduli di "livello 4". Vedi il supporto del browser .

Dettagli

[attribute]

Seleziona elementi con l'attributo dato.

div[data-color] {
  color: red;
}
<div data-color="red">This will be red</div>
<div data-color="green">This will be red</div>
<div data-background="red">This will NOT be red</div>

Live Demo su JSBin

[attribute="value"]

Seleziona elementi con l'attributo e il valore specificati.

div[data-color="red"] {
  color: red;
}
<div data-color="red">This will be red</div>
<div data-color="green">This will NOT be red</div>
<div data-color="blue">This will NOT be red</div>

Live Demo su JSBin

[attribute*="value"]

Seleziona gli elementi con l'attributo e il valore specificati in cui l'attributo dato contiene il valore dato da qualsiasi parte (come sottostringa).

[class*="foo"] {
  color: red;
}
<div class="foo-123">This will be red</div>
<div class="foo123">This will be red</div>
<div class="bar123foo">This will be red</div>
<div class="barfooo123">This will be red</div>
<div class="barfo0">This will NOT be red</div>

Live Demo su JSBin

[attribute~="value"]

Seleziona gli elementi con l'attributo e il valore specificati in cui il valore indicato viene visualizzato in un elenco separato da spazi.

[class~="color-red"] {
  color: red;
}
<div class="color-red foo-bar the-div">This will be red</div>
<div class="color-blue foo-bar the-div">This will NOT be red</div>

Live Demo su JSBin

[attribute^="value"]

Seleziona gli elementi con l'attributo e il valore specificati in cui l'attributo dato inizia con il valore.

[class^="foo-"] {
  color: red;
}
<div class="foo-123">This will be red</div>
<div class="foo-234">This will be red</div>
<div class="bar-123">This will NOT be red</div>

Live Demo su JSBin

[attribute$="value"]

Seleziona gli elementi con l'attributo e il valore specificati in cui l'attributo dato termina con il valore dato.

[class$="file"] {
  color: red;
}
<div class="foobar-file">This will be red</div>
<div class="foobar-file">This will be red</div>
<div class="foobar-input">This will NOT be red</div>

Live Demo su JSBin

[attribute|="value"]

Seleziona gli elementi con un determinato attributo e valore dove il valore dell'attributo è esattamente il valore dato o è esattamente il valore dato seguito da - (U + 002D)

[lang|="EN"] {
  color: red;
}
<div lang="EN-us">This will be red</div>
<div lang="EN-gb">This will be red</div>
<div lang="PT-pt">This will NOT be red</div>

Live Demo su JSBin

[attribute="value" i]

Seleziona elementi con un dato attributo e un valore in cui il valore dell'attributo può essere rappresentato come Value , VALUE , vAlUe o qualsiasi altra possibilità maiuscole e minuscole.

[lang="EN" i] {
  color: red;
}
<div lang="EN">This will be red</div>
<div lang="en">This will be red</div>
<div lang="PT">This will NOT be red</div>

Live Demo su JSBin

Specificità dei selettori di attributi

0-1-0

Come selettore di classe e pseudoclass.

*[type=checkbox] // 0-1-0

Nota che questo significa che un selettore di attributo può essere usato per selezionare un elemento dal suo ID a un livello inferiore di specificità che se fosse stato selezionato con un selettore ID : [id="my-ID"] lo stesso numero di #my-ID ma con specificità inferiore.

Vedi la sezione Sintassi per maggiori dettagli.