Est-il possible de sélectionner des éléments en CSS par leur HTML5 attributs de données (par exemple, data-role
)?
Réponses
Trop de publicités?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.
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