Quels caractères sont valides dans les noms de classe/sélecteurs CSS?

À ma grande surprise, la plupart des réponses sont fausses. Il s'avère que:

tout caractère autre que NUL est autorisé dans les noms de classe CSS dans CSS. (si CSS contient NUL (échappé ou non), le résultat n'est pas défini. [ CSS-caractères ])

Mathias Bynens " réponse liens explication et démos montrant comment utiliser ces noms. écrit en code CSS , un nom de classe peut avoir besoin d'échapper , mais cela ne change pas le nom de classe. Par exemple: une représentation inutilement échappée par trop paraîtra différente des autres représentations de ce nom, mais elle se réfère toujours au même nom de classe.

la plupart des autres langues (de programmation) n'ont pas ce concept d'échapper aux noms de variables ("identificateurs"), de sorte que toutes les représentations d'une variable doivent ressembler à la même. Ce n'est pas le cas dans les CSS.

notez qu'en HTML il n'y a aucun moyen d'inclure les caractères d'espace (espace, onglet, alimentation de ligne, alimentation de forme et retour de chariot) dans un attribut de nom de classe , parce qu'ils séparent déjà les classes les uns des autres.

donc, si vous avez besoin de transformer une chaîne aléatoire en un nom de classe CSS: prenez soin de NUL et space, et escape (en conséquence pour CSS ou HTML). Faire.

Lire spec W3C . (c'est CSS 2.1, trouver la version appropriée pour votre hypothèse de navigateurs)

modifier le paragraphe pertinent comme suit:

dans CSS, identificateurs (y compris les noms d'éléments, les classes et les identificateurs dans sélecteurs) ne peuvent contenir que les caractères [a-z0-9] et ISO 10646 les caractères U+00A1 et plus, plus le trait d'union (-) et le trait de soulignement (_); ils ne peuvent pas commencer par un chiffre, ou un trait d'union suivi par un chiffre. Les identificateurs peuvent également contenir échappé caractères et tout caractère ISO 10646 comme un code numérique (voir point suivant). Pour par exemple, l'identificateur " B & W?"peut-être écrit comme " B\&W\?"ou"B\26 W\3F".

edit 2: comme @mipadi le souligne dans la réponse de Triptych, il y a cette mise en garde , aussi dans la même page Web:

dans CSS, les identificateurs peuvent commencer par' -' (tiret) ou"_" (souligner.) Mot et les noms de propriétés commençant par' -' ou '_' sont réservés pour extensions propres aux fournisseurs. Tel les extensions propres à un fournisseur devraient avoir un des formats suivants:

'-' + vendor identifier + '-' + meaningful name 
'_' + vendor identifier + '-' + meaningful name

exemple (s):

par exemple, si l'organisation XYZ a ajouté une propriété pour décrire la couleur de la frontière sur le côté Est de la affichage, ils pourraient appeler cela -xyz-frontière-est de la couleur.

autres exemples:

 -moz-box-sizing
 -moz-border-radius
 -wap-accesskey

un tiret ou un trait de soulignement initial est la garantie de ne jamais être utilisé dans un propriété ou mot clé par n'importe quel courant ou niveau futur de CSS. Ainsi CSS typique les implémentations peuvent ne pas reconnaître ces propriétés et peut les ignorer selon les règles de manipulation l'analyse des erreurs. Cependant, parce que la le tiret ou le trait de soulignement initial fait partie la grammaire, CSS 2.1 les responsables de l'implémentation devrait toujours pouvoir utiliser un Parser conforme CSS, si ou pas ils soutiennent un fournisseur spécifique extension.

les auteurs doivent éviter les extensions

j'ai répondu à votre question en profondeur ici: http://mathiasbynens.be/notes/css-escapes

l'article explique aussi comment échapper à tout caractère dans CSS (et JavaScript), et j'ai fait un outil pratique pour cela aussi. De cette page:

si vous deviez donner à un élément une valeur ID de ~!@$%^&*()_+-=,./';:"?><[]{}|`# , le sélecteur ressemblerait à ceci:

CSS:

<style>
  #\~\!\@$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\{\}\|\`\#
  {
    background: hotpink;
  }
</style>

JavaScript:

<script>
  // document.getElementById or similar
  document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\{}|`#');
  // document.querySelector or similar
  $('#\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#');
</script>

l'expression régulière complète est:

-?(?:[_a-z]|[0-7]|\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[0-7]|\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\[^\r\n\f0-9a-f])*

de sorte que tous les caractères énumérés à l'exception de - " et " _ " ne sont pas autorisés s'ils sont utilisés directement. Mais vous pouvez les encoder en utilisant un antislash foo\~bar ou en utilisant la notation unicode fooE bar .

Pour ceux qui recherchent une solution de contournement, vous pouvez utiliser un sélecteur d'attribut, par exemple, si votre classe commence par un numéro. Changement:

.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */

à ceci:

[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */

aussi, s'il y a plusieurs classes, vous devrez les spécifier dans selector je pense.

Sources:

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
2. y a-t-il une solution pour rendre les classes CSS avec des noms qui commencent par des nombres valides?

pour les classes HTML5/CSS3 et les identifiants peuvent commencer par des nombres.

je crois comprendre que le trait de soulignement est techniquement valide. Découvrez:

https://developer.mozilla.org/en/underscores_in_class_and_id_names

"...errata à la spécification publiée au début de 2001 fait souligne juridique pour la première fois."

l'article lié ci-dessus dit Ne jamais les utiliser, puis donne une liste de navigateurs qui ne les prennent pas en charge, tous qui sont, en termes de nombre d'utilisateurs, au moins, à long redondant.