Seleziona gli elementi in base all'attributo dei dati nel CSS

488

È possibile selezionare elementi nei CSS in base ai loro attributi di dati HTML5 (ad esempio data-role)?

— Diogo Cardoso
fonte

776

Se intendi usare un selettore di attributi , certo, perché no:

[data-role="page"] {
    /* Styles */
}

Esistono vari selettori di attributi che è possibile utilizzare per vari scenari, tutti trattati nel documento a cui mi collego. Tieni presente che, nonostante gli attributi di dati personalizzati siano una "nuova funzionalità HTML5",

i browser in genere non hanno problemi a supportare attributi non standard, quindi dovresti essere in grado di filtrarli con selettori di attributi; e
non devi preoccuparti nemmeno della convalida CSS, poiché i CSS non si preoccupano dei nomi di attributi non spaziati purché non interrompano la sintassi del selettore.

— BoltClock
fonte

4

È compatibile con tutti i navigatori?

— Christophe Debove,

21

@Christophe Debove: IE7 + e tutto il resto.

— BoltClock

7

CSS non sembra rilevare questo se l'attributo di dati è impostato o modificato tramite JS.

— ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

30

Dopo ulteriori indagini sembrerebbe $("#element").data("field","value");che non cambi il valore degli attributi dei dati, ma modifica solo la versione cache del DOM di jQuery. Per modificare l'attuale attributo DOM è necessario utilizzare $("#element").attr("data-field","value");. Rendere il mio commento originale non valido.

— ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

2

Sì, sembra che anche la modifica del set di dati funzioni @Matthew - jsfiddle.net/BoltClock/k378xgj3 Grazie per niente jQuery.

— BoltClock

107

È anche possibile selezionare gli attributi indipendentemente dal loro contenuto, nei browser moderni

con:

[data-my-attribute] {
   /* Styles */
}

[anything] {
   /* Styles */
}

Ad esempio: http://codepen.io/jasonm23/pen/fADnu

Funziona su una percentuale molto significativa di browser.

Nota che può essere usato anche in un selettore JQuery o usando document.querySelector

— ocodo
fonte

Wow, non ho mai visto che potesse essere usato così !! +1! E FWIW, ora che i browser sono scaduti, credo che funzioni in IE7 +, quindi il suo supporto è praticamente onnipresente. È divertente che nemmeno Chris Coyier ne abbia parlato qui

— Camilo Martin il

Grazie @CamiloMartin ho rimosso il collegamento browser per evitare confusione / fastidio.

— ocodo,

Aggiunto un link al thread di Chris Coyier css-tricks.com/attribute-selectors/#comment-965838 @CamiloMartin

— ocodo

1

Nessuna di questa sintassi è comunque nuova: più persone sono state sorprese dal fatto che IE6 non lo supportasse di IE7 +. Puoi presumere che tutti i selettori CSS2.1 siano supportati in IE8 e versioni successive - IE7 fa la maggior parte, anche se con alcuni bug oscuri. Tutti i browser moderni hanno supportato i selettori di livello 3 per un po ', con Chrome invece quello difettoso.

— BoltClock

1

Dal momento che siamo in tema di selettori di attributo, però, è interessante notare che la sottostringa selettori di attributo che sono state introdotte a livello 3 ( ^=, *=e $=) sono supportati anche da IE7 e IE8. Forse sono stati introdotti in IE prima di essere standardizzati.

— BoltClock

47

Vale la pena notare i selettori degli attributi di sottostringa CSS3

[attribute^=value] { /* starts with selector */
/* Styles */
}

[attribute$=value] { /* ends with selector */
/* Styles */
}

[attribute*=value] { /* contains selector */
/* Styles */
}

— Matas Vaitkevicius
fonte

13

Puoi combinare più selettori e questo è così bello sapere che puoi selezionare ogni attributo e attributo in base al loro valore come hrefbasato sui loro valori solo con CSS.

I selettori di attributi ti consentono di giocare con qualche extra con ide classattributi

Ecco una fantastica lettura sui selettori di attributi

Violino

a[href="http://aamirshahzad.net"][title="Aamir"] {
  color: green;
  text-decoration: none;
}

a[id*="google"] {
  color: red;
}

a[class*="stack"] {
  color: yellow;
}

<a href="http://aamirshahzad.net" title="Aamir">Aamir</a>
<br>
<a href="http://google.com" id="google-link" title="Google">Google</a>
<br>
<a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>

Espandi frammento

Supporto per browser:
IE6 +, Chrome, Firefox e Safari

Puoi controllare i dettagli qui .

— Aamir Shahzad
fonte

4

    [data-value] {
  /* Attribute exists */
}

[data-value="foo"] {
  /* Attribute has this exact value */
}

[data-value*="foo"] {
  /* Attribute value contains this value somewhere in it */
}

[data-value~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */
}

[data-value^="foo"] {
  /* Attribute value starts with this */
}

[data-value|="foo"] {
  /* Attribute value starts with this in a dash-separated list */
}

[data-value$="foo"] {
  /* Attribute value ends with this */
}

— Khan navigato
fonte