Est-il possible d'utiliser le caractère espace dans les noms de classes CSS ?

Question

J'ai un cas avec des noms de classe générés par ordinateur où il se pourrait que le nom de classe contienne un caractère espace (je n'ai pas de contrôle direct sur les ID qui sont transformés en noms de classe). J'ai trouvé comment échapper à tous les caractères dans CSS (voir les excellentes réponses dans Quels sont les caractères valides dans les noms de classe/sélecteurs CSS ? et http://mathiasbynens.be/notes/css-escapes ).

Mais je n'ai pas réussi à faire échapper un caractère d'espace dans un nom de classe CSS dans le code HTML.

J'ai maintenant utilisé une solution qui évite les espaces, mais je suis néanmoins curieux de savoir si / comment il serait possible d'échapper au caractère espace dans la valeur de l'attribut de classe.

Ex : le nom de ma classe est "a b" .

Je peux écrire un sélecteur CSS en CSS comme suit .a\20 b { } .

Mais en utilisant   dans l'attribut tel que <div class="a&#x20;b"/> sera interprété de la même manière que <div class="a b"/> et cela définit deux classes.

Answer 1

Il reconnaît l'espace comme nouveau class name donc utiliser . au lieu de space dans le css.

.a.b{
color:red
}

<div class="a b">try me</div>

Answer 2

https://html.spec.whatwg.org/multipage/dom.html#classes

Lorsqu'elle est spécifiée sur des éléments HTML, l'option class doit avoir une valeur qui est un ensemble de séparées par des espaces des jetons représentant les différentes classes auxquelles l'élément appartient.

Bien sûr, il est possible d'échapper à un caractère d'espacement, par ex.   - Les valeurs des attributs HTML peuvent contenir des références de caractères par https://html.spec.whatwg.org/multipage/syntax.html#syntax-attribute-value :

Les valeurs des attributs sont un mélange de texte et de références de caractères, avec la restriction supplémentaire que le texte ne peut pas contenir une esperluette ambiguë.

Cependant, il importe peu que l'espace soit mis en évidence par le HTML ou non pour que la déclaration ci-dessus s'applique. Un caractère d'espace encodé en HTML est toujours décodé en un caractère d'espace, et donc, par ex. class="a b" donne toujours comme résultat "un ensemble de tokens séparés par des espaces". Voir par exemple https://html.spec.whatwg.org/multipage/parsing.html#attribute-value-(double guillemet)-état pour la façon dont les valeurs d'attributs entre guillemets sont analysées.

Answer 3

Il n'y a aucun moyen d'échapper au caractère d'espacement dans la valeur de l'attribut de classe et il sera donc toujours interprété comme deux classes différentes.