529 votes

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

830voto

BoltClock Points 249668

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

119voto

EmacsFodder Points 12284

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

Fonctionne 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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X