Sélectionner les éléments de données de l'attribut CSS

Est-il possible de sélectionner des éléments en CSS par leur HTML5 attributs de données (par exemple, data-role)?

InformationsquelleAutor Diogo Cardoso | 2011-03-16
  1. 704

    Si vous voulez dire à l'aide d'un sélecteur d'attribut, bien sûr, pourquoi pas:

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

    Il existe une variété de sélecteur d'attribut que vous pouvez utiliser pour les différents scénarios qui sont abordés dans le document que j'ai un lien. Notez que, malgré la coutume de données d'attributs d'une "nouvelle fonctionnalité HTML5",

    • en général, les navigateurs n'ont pas de problèmes en soutenant les attributs standard, de sorte que vous devriez être en mesure de les filtrer avec sélecteur d'attribut; et

    • vous n'avez pas à vous soucier de validation CSS, comme en CSS ne se soucient pas de la non-espaces de noms d'attribut tant qu'ils ne se cassent pas le sélecteur de syntaxe.

    • Est compatible avec tous les navigateur?
    • Deboves: IE7+, et tout le reste.
    • Meilleure liste de sélecteurs j'ai vu avec des possibilités et des descriptions. code.tutsplus.com/tutorials/...
    • CSS ne semble pas détecter si l'attribut de données est créé ou modifié via JS.
    • T. Baker: Intéressant, merci. Je ne peux pas prétendre à comprendre comment les jeux de données de travail sous le capot, mais il est probable que la modification d'un élément du dataset ne permet pas de définir ou mettre à jour sa liste d'attributs, qui est un attribut de sélection est vraiment à la recherche. En d'autres termes, la transformation de données d'attributs à un jeu de données ne fonctionne que dans un sens - toute modification de ce dernier ne sont pas réfléchie.
    • Après enquête, il semblerait $("#element").data("field","value"); ne modifie pas les attributs de données de la valeur, il ne modifie que jQuery version en cache de la DOM. Afin de modifier le DOM attribut, il doit utiliser $("#element").attr("data-field","value");. De faire mon commentaire d'origine non valide.
    • Ouais, on dirait de la modification de l'ensemble de données ne fonctionne pas comme bien @Matthieu - jsfiddle.net/BoltClock/k378xgj3 Merci pour rien jQuery.
    • Si vous aviez <div data-role="page"><div class="foo">Content here</div></div> et je voulais changer le style de l'intérieur de la div, vous pouvez utiliser [data-role="page"] .foo{background-color:red;}

    InformationsquelleAutor BoltClock
  2. 99

    Il est aussi possible de sélectionner les attributs indépendamment de leur contenu, dans les navigateurs modernes

    avec: 

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

[anything] {
   /* Styles */
}

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

    Travaille sur un très important pourcentage de navigateurs.

    Remarque, cela peut également être utilisé dans un sélecteur JQuery, ou à l'aide de document.querySelector

    • Wow, je n'ai jamais vu, il peut être utilisé comme cela!! +1! Et FWIW, maintenant que la browsershots est expiré, je crois qu'il travaille dans IE7+ pour son soutien est quasiment omniprésente. C'est drôle de voir que même pas Chris Coyier mentionné, ici
    • Merci @CamiloMartin j'ai enlevé le browsershots lien pour éviter la confusion / gêne.
    • Ajout d'un lien vers Chris Coyier du thread css-tricks.com/attribute-selectors/#comment-965838 @CamiloMartin
    • Grande, la plus qui connaissent le mieux 🙂 et oui, confirmée à travailler sur IE7+.
    • Aucun de cette syntaxe est nouveau, en tout cas - plus de gens ont été surpris de voir que IE6 ne supporte pas que IE7+ ne. Vous pouvez très bien assumer tous les CSS2.1 sélecteurs sont pris en charge dans IE8 et plus tard - IE7 n'est plus, mais avec quelques bogues obscures. Tous les navigateurs modernes ont pris en charge niveau 3 sélecteurs pour un temps, avec le Chrome étant la poussette à la place.
    • Puisque nous sommes sur le sujet de sélecteur d'attribut cependant, il est intéressant de noter que la sous-chaîne sélecteur d'attribut qui ont été introduites dans le niveau 3 (^=, *= et $=) sont également pris en charge par IE7 et IE8. Peut-être qu'ils ont été introduits dans IE avant d'être normalisé.

    InformationsquelleAutor ocodo
  3. 39

    Il est intéressant de noter CSS3 sous-chaîne sélecteur d'attribut

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

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

[attribute*=value] { /* contains selector */
/* Styles */
}
    InformationsquelleAutor Matas Vaitkevicius
  4. 12

    Vous pouvez combiner plusieurs sélecteurs et c'est tellement cool de savoir que vous pouvez sélectionner tous les attributs et attribut, sur la base de leur valeur comme href basés sur leurs valeurs avec CSS..

    Sélecteurs d'attributs permet de vous jouer quelques-uns supplémentaires avec id et class attributs

    Ici est un jeu génial de lire sur Sélecteur D'Attribut

    Violon

    CSS:

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

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

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

    HTML:

    <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>

    Prise en charge du navigateur:

    IE6+, Chrome, Firefox & Safari

    Vous pouvez vérifier les détails ici.

    InformationsquelleAutor Aamir Shahzad