Sélectionner les éléments par attribut de données en CSS

Réponses:

776

Si vous voulez dire utiliser un sélecteur d'attribut , pourquoi pas:

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

Il existe une variété de sélecteurs d'attributs que vous pouvez utiliser pour différents scénarios, qui sont tous couverts dans le document auquel je renvoie. Notez que, bien que les attributs de données personnalisés soient une "nouvelle fonctionnalité HTML5",

  • les navigateurs n'ont généralement aucun problème à prendre en charge les attributs non standard, vous devriez donc être en mesure de les filtrer avec des sélecteurs d'attributs; et

  • vous n'avez pas non plus à vous soucier de la validation CSS, car CSS ne se soucie pas des noms d'attributs non espacés tant qu'ils ne cassent pas la syntaxe du sélecteur.

BoltClock
la source
4
Est compatible avec tous les navigateurs?
Christophe Debove
21
@Christophe Debove: IE7 + et tout le reste.
BoltClock
7
CSS ne semble pas détecter cela si l'attribut de données est défini ou modifié via JS.
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
30
Après une enquête plus approfondie, il semblerait que $("#element").data("field","value");cela ne change pas la valeur des attributs de données, il modifie uniquement la version mise en cache du DOM par jQuery. Afin de changer l'attribut DOM réel, il faut utiliser $("#element").attr("data-field","value");. Rendre mon commentaire d'origine invalide.
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
2
Ouais, il semble que la modification de l'ensemble de données fonctionne aussi bien @Matthew - jsfiddle.net/BoltClock/k378xgj3 Merci pour rien jQuery.
BoltClock
107

Il est également possible de sélectionner des attributs quel que soit leur contenu, dans les navigateurs modernes

avec: 

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

[anything] {
   /* Styles */
}

Par exemple: http://codepen.io/jasonm23/pen/fADnu

Fonctionne sur un pourcentage très important de navigateurs.

Notez que cela peut également être utilisé dans un sélecteur JQuery, ou en utilisant document.querySelector

ocodo
la source
Wow, je n'ai jamais vu qu'il pouvait être utilisé comme ça !! +1! Et FWIW, maintenant que les navigateurs sont expirés, je pense que cela fonctionne dans IE7 +, donc son support est à peu près omniprésent. C'est drôle que même Chris Coyier ne l'ait pas mentionné ici
Camilo Martin
Merci @CamiloMartin J'ai supprimé le lien des navigateurs pour éviter toute confusion / agacement.
ocodo
Ajout d'un lien vers le fil de discussion de Chris Coyier css-tricks.com/attribute-selectors/#comment-965838 @CamiloMartin
ocodo
1
De toute façon, aucune de ces syntaxes n'est nouvelle - plus de gens ont été surpris que IE6 ne les supporte pas que IE7 +. Vous pouvez à peu près supposer que tous les sélecteurs CSS2.1 sont pris en charge dans IE8 et versions ultérieures - IE7 le fait le plus, bien qu'avec quelques bugs obscurs. Tous les navigateurs modernes prennent en charge les sélecteurs de niveau 3 depuis un certain temps, Chrome étant le buggy à la place.
BoltClock
1
Comme nous parlons des sélecteurs d'attributs, il est intéressant de noter que les sélecteurs d'attributs de sous-chaîne qui ont été introduits au niveau 3 ( ^=, *=et $=) sont également pris en charge par IE7 et IE8. Peut-être qu'ils ont été introduits dans IE avant d'être standardisés.
BoltClock
47

Il convient de noter les sélecteurs d'attributs de sous-chaîne CSS3

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

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

[attribute*=value] { /* contains selector */
/* Styles */
}
Matas Vaitkevicius
la source
13

Vous pouvez combiner plusieurs sélecteurs et c'est tellement cool de savoir que vous pouvez sélectionner chaque attribut et attribut en fonction de leur valeur comme en hreffonction de leurs valeurs avec CSS uniquement ..

Les sélecteurs d'attributs vous permettent de jouer avec des attributs supplémentaires idetclass

Voici une lecture impressionnante sur les sélecteurs d'attributs

Violon

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>
Développer l'extrait

Prise en charge du navigateur:
IE6 +, Chrome, Firefox et Safari

Vous pouvez vérifier les détails ici .

Aamir Shahzad
la source
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 */
}
Naved Khan
la source