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

Les caractères et les symboles sont admis à l'intérieur de la classe CSS sélecteurs? Je sais que les caractères suivants sont invalide, mais quels sont les caractères sont valide?

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #
Question connexe: stackoverflow.com/questions/2812072/...
ce sujet de caractères utf8? Comme je l'ai peut-type en grec
Les caractères spéciaux peuvent être utilisés dans les noms de classe par la fuite - dans votre fichier CSS, vous pouvez définir un .hello/world classe par s'échapper de la barre oblique inverse: .hello\2fworld, hello\2f world ou hello\/world
Une autre question, pas sur "la syntaxe des noms", mais de "syntaxe de l'attribut "class" lors de la exprimer de multiples noms de.
Vous pouvez également utiliser des émoticônes. npmjs.com/package/postcss-modules-emoji-classname

OriginalL'auteur Darryl Hein | 2009-01-15

  1. 973

    Vous pouvez consulter directement à la Grammaire CSS.

    Fondamentalement1, le nom doit commencer par un caractère de soulignement (_), un trait d'union (-), ou d'une lettre(a–z), suivi par un certain nombre de traits d'union, des traits de soulignement, de lettres ou de chiffres. Il y a un hic: si le premier caractère est un trait d'union, le deuxième personnage doit2 être une lettre ou un trait de soulignement, et le nom doit être d'au moins 2 caractères.

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

    En bref, la règle précédente se traduit par la suivante, extraite de la W3C spec.:

    Dans le CSS, les identifiants (y compris les noms d'élément, les classes et les Id dans
    sélecteurs) peut 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 tiret suivi d'un nombre.
    Les identificateurs peuvent également contenir des caractères d'échappement et un ISO 10646
    caractère d'un code numérique (voir point suivant). Par exemple, l'
    identificateur de "B&W?" peut être écrit "B\&W\?" ou "B\26 W\3F".

    Identificateurs commençant par un tiret ou trait de soulignement sont généralement réservés pour le navigateur extensions spécifiques, comme dans -moz-opacity.

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

    2 Note que, conformément à la grammaire, j'ai fait un lien, une règle de départ avec DEUX traits d'union, par exemple --indent1, est invalide. Cependant, je suis sûr que j'ai vu cela dans la pratique.

    NB: Le W3C a dit que l'usage de l'un des leaders des " - " ou " _ " devrait être réservé pour les fournisseurs spécifiques CSS extensions (par exemple, -moz* les classes mises en œuvre par les navigateurs Mozilla).
    L' \échappe sont couramment utilisés, mais en général, surtout pour les fins de hacks CSS, isoler les navigateurs qui ne les supportent pas.
    Pour mettre à jour @Pim Jager un commentaire de plus de deux ans plus tard, selon w3counter.com/globalstats.php IE6 est maintenant utilisé par moins de 3% des utilisateurs, derrière IE9 sur 4%, IE7 sur 9%, IE8 sur de 22%. Toutes les versions de Firefox 28%, toutes les versions de Chrome de 17%.
    Tout peut être échappé. mothereffingcssescapes.com/#--indent1
    In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F". Soi - --indent1 est pas valide et doit être échappé que \--indent1 (-- classes pause sur iOS, par exemple)

    OriginalL'auteur Triptych

  2. 153

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

    N'importe quel caractère sauf NUL n'est autorisé dans les noms de classe CSS en CSS. (Si CSS contient NUL (échappé ou pas), le résultat est indéfini. [CSS-les personnages])

    Mathias Bynens réponse des liens vers explication et les démos montrant comment utiliser ces noms. Écrit dans le code CSS, un nom de classe peuvent avoir besoin de s'échapper, mais cela ne change pas le nom de la classe. E. g. un inutilement sur-échappé à la représentation aura un aspect différent de d'autres représentations de ce nom, mais il fait toujours référence à la même nom de la classe.

    La plupart des autres (programmation) langues n'ont pas cette notion de s'en échapper, les noms de variables (les“identifiants”), de sorte que toutes les observations d'une variable ont le même aspect. Ce n'est pas le cas dans le CSS.

    Note qu'en HTML, il est impossible d'inclure des caractères d'espacement (espace, tabulation, saut de ligne, saut de page et un retour chariot) dans un nom de la classe de l'attribut, car ils ont déjà des classes séparées les unes des autres.

    Donc, si vous avez besoin pour transformer une chaîne de caractères dans un nom de classe CSS: prendre soin de NUL et de l'espace, et de s'échapper (en conséquence pour CSS ou HTML). Fait.

    La première ligne de votre réponse devrait être "la plupart des réponses ici sont dépassées/s'appliquent uniquement aux CSS2".
    Les réponses que je reportez-vous à eu tort depuis le début. Ils s'appliquent ni à CSS2.1, CSS2, ni CSS1.
    bon point, j'ai déménagé mon commentaire à stackoverflow.com/questions/50812118/... (qui n'est jamais le moins liée à ce sujet)

    OriginalL'auteur Robert Siemer

  3. 66

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

    edit: paragraphe qui suit:

    Dans le CSS, les identifiants (y compris
    les noms d'élément, les classes et les Id dans
    sélecteurs) ne peut contenir que les
    les caractères [a-z0-9] et ISO 10646
    les caractères U+00A1 et supérieur, en plus de la
    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 ISO 10646 caractère
    comme un code numérique (voir point suivant). Pour
    exemple, l'identificateur de "B&W?"
    écrit "B\&W\?" ou "B\26 W\3F".

    edit 2: @mipadi points dans le Triptyque de la réponse, il y a cette mise en garde, également dans la même page web:

    Dans le CSS, les identifiants peuvent commencer par un '-'
    (tableau de bord) ou " _ " (trait de soulignement). Mots-clés
    et de la propriété des noms commençant par un '-'
    ou '_' sont réservés pour
    des extensions spécifiques au fournisseur. Ces
    des extensions spécifiques au fournisseur devrait avoir
    l'un des formats suivants:

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

    Exemple(s):

    Par exemple, si XYZ organisation 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.

    D'autres exemples connus:

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

    Un premier tiret ou underscore est
    la garantie de ne jamais être utilisé dans un
    de propriété ou d'un mot clé par tous
    niveau futur de la CSS. Ainsi, typique CSS
    les implémentations peuvent ne pas reconnaître ces
    propriétés et peuvent les ignorer
    selon les règles de traitement des
    l'analyse des erreurs. Cependant, parce que la
    initiale tiret ou underscore est une partie de
    la grammaire, CSS 2.1 les responsables de l'implémentation
    doit toujours être en mesure d'utiliser un
    CSS conforme de l'analyseur, si oui ou non
    ils soutiennent un fournisseur spécifique
    extensions.

    Les auteurs doivent éviter de spécifiques au fournisseur
    extensions

    ??? "y compris les noms d'élément, les classes"?
    Je faisais allusion à votre deuxième édition diriger des tirets et des tirets bas, mais il a oublié de préciser que. Désolé pour la confusion.

    OriginalL'auteur Jason S

  4. 62

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

    L'article explique également comment échapper à n'importe quel caractère (CSS et JavaScript), et j'ai fait un outil pratique pour cela ainsi. À partir de cette page:

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

    CSS:

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

    JavaScript:

    <script>
  //document.getElementById or similar
  document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#');
  //document.querySelector or similar
  $('#\\~\\!\\@\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#');
</script>
    +1 mais pourquoi auriez-vous besoin d'avoir une classe nommée!! 😛
    Bien sûr, c'est un exemple assez extrême, mais des trucs comme class="404-error" peut être utile.
    j'ai un exemple: - je convertir une coloration syntaxique du système de sortie du CSS. il a de la classe des noms comme “ISO C++:Types (_t/_type)”. si je ne remplacez les espaces que j'ai valide les noms de classe.
    Sur votre site, vous dites que le caractère espace, barre oblique inverse peut être échappé. Quand je l'ai essayer dans un nom de classe, je ne peux pas le faire fonctionner. J'ai remarqué il n'y a pas d'espace dans cet exemple. Est-il possible?
    Comme avec la plupart des choses dans la vie, il semble en CSS, il y a une différence entre "techniquement juridique à l'extrême" et "sain d'esprit".

    OriginalL'auteur Mathias Bynens

  5. 23

    La complète expression régulière est:

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

    Donc toutes vos répertoriés caractère sauf “-” et “_” ne sont pas autorisés si elle est utilisée directement. Mais vous pouvez encoder à l'aide d'une barre oblique inverse foo\~bar ou de l'utilisation de l'unicode notation foo\7E bar.

    pourquoi [\200-\377]? [\178-\1114112] est autorisé sans échappement en CSS 3.
    \377 ici est en fait mal. Il y a une note sur la Grammaire de CSS2.1 Lexical de Scanner l'article qui stipule: "Le "\377" représente le plus haut nombre de caractères que les versions actuelles de Flex peut traiter (décimal 255). Il doit être lu comme "\4177777" (décimal 1114111), qui est le plus haut possible le point de code Unicode/ISO-10646." Il convient également de \240 ainsi, pas \377. Je suppose que c'est l'âge de 7 ans maintenant, mais les choses ont sans doute un peu changé depuis.
    Je crois qu'un des plus précis de l'expression régulière serait -?(?:[_a-z]|(?![\u0000-\u0239]).*|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|(?![\u0000-\u0239]).*|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*.
    N'hésitez pas à modifier ma réponse si vous pensez qu'il a besoin d'une mise à jour.

    OriginalL'auteur Gumbo

  6. 7

    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. Modification:

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

    :

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

    Également, s'il y a plusieurs classes, vous devez le spécifier dans le sélecteur, je pense.

    Sources:

    1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
    2. Est-il une solution pour faire des classes CSS avec des noms qui commencent avec les numéros valides?

    OriginalL'auteur D.Tate

  7. 5

    Pour HTML5/CSS3 les classes et les Id peuvent commencer avec des nombres.

    Avez-vous une source pour ça? Peut-être que je manque quelque chose, mais le sélecteurs CSS3 spec les liens identificateurs de définition dans le CSS 2.1 spec qui ne permet pas commencer par un chiffre.
    Voici une ressource pour ça: mathiasbynens.être/notes/html5-id-classe
    w3.org/TR/2003/WD-css3-syntax-20030813/#characters <--ne fonctionne toujours pas permis conduisant des numéros etc (même si ça marche)
    HTML 5 permet de classes et les Id de commencer par un nombre (par exemple,class="1a"). Cependant, un CSS identificateur ne peut pas commencer par un nombre (par exemple, .1a ne fonctionnera pas). Vous pouvez y échapper, dur (par exemple .\31 a ou .\000031a).
    Bien qu'il fonctionne normalement en CSS aussi, mais on dirait qu'il est pas encore officielle. "Les noms de propriété et à la règle sont toujours les noms des identificateurs, qui doivent commencer par une lettre ou un tiret suivi d'une lettre, et puis peut contenir des lettres, des chiffres, des tirets ou des traits de soulignement." - w3.org/TR/css3-syntax/#syntax-description

    OriginalL'auteur Marius

  8. 4

    Ma compréhension est que le trait de soulignement est techniquement valable. Découvrez:

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

    "...errata au cahier des charges publié au début de 2001, souligne juridiques pour la première fois."

    L'article lié ci-dessus, dit ne jamais les utiliser, donne ensuite une liste de navigateurs qui ne supportent pas entre eux, qui sont, en termes de nombre d'utilisateurs, au moins, à long redondant.

    OriginalL'auteur mofaha