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

quels caractères / Symboles sont autorisés dans les sélecteurs de classe CSS? Je sais que les caractères suivants sont invalide , mais quels caractères sont valide ?

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #
1078
demandé sur Triptych 2009-01-16 02:37:39
la source

8 ответов

vous pouvez vérifier directement à la CSS grammar .

en gros 1 , un nom doit commencer par un trait d'Union ( _ ), un trait d'Union ( - ), ou une lettre( az ), suivi d'un nombre quelconque de traits d'union, de soulignements, de lettres ou de chiffres. Il y a un hic: si le premier caractère est un trait d'Union, le second caractère doit 2 être une lettre ou soulignement, et le nom doit avoir au moins 2 caractères.

-?[_a-zA-Z]+[_a-zA-Z0-9-]*
Les identificateurs

commençant par un trait d'Union ou un trait de soulignement sont généralement réservés aux extensions propres au navigateur, comme dans -moz-opacity .

1 tout est rendu un peu plus compliqué par l'inclusion de caractères unicode échappés (que personne n'utilise vraiment).

2 Notez que, selon la grammaire je linked, une règle commençant par deux tirets , par exemple --indent1 , est invalide. Cependant, je suis assez sûr que j'ai vu cela dans la pratique.

931
répondu Triptych 2016-08-16 03:44:30
la source

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

145
répondu Robert Siemer 2017-12-23 17:48:14
la source

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

65
répondu Jason S 2009-01-16 02:59:09
la source

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 [email protected]$%^&*()_+-=,./';:"?><[]{}|`# , le sélecteur ressemblerait à ceci:

CSS:

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

JavaScript:

<script>
  // document.getElementById or similar
  document.getElementById('[email protected]$%^&*()_+-=,./\';:"?><[]\{}|`#');
  // document.querySelector or similar
  $('#\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#');
</script>
60
répondu Mathias Bynens 2015-09-28 18:49:19
la source

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 .

22
répondu Gumbo 2009-01-16 03:05:03
la source

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?
6
répondu D.Tate 2017-05-23 15:03:09
la source

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

5
répondu Marius 2009-10-12 18:04:04
la source

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.

4
répondu mofaha 2010-07-31 09:33:54
la source

Autres questions sur css css-selectors