Nommage des classes css (commencer par une lettre de préférence)

Général
1

Bonjour,
Je partage cette info au cas où ça serve à d’autres : j’ai remarqué que les classes css ne sont prises en compte que lorsque leur syntaxe débute par une lettre.

Nommer une classe en commençant par un chiffre ne fonctionne pas (en tous cas, pas avec Firefox à jour).
ex. dans le fichier html,

ne permet pas de prendre en compte la classe .404-text du fichier CSS.

Par contre, cela fonctionne si dans le fichier html, on a

avec la classe .page_404-text du fichier CSS.

2

Le 23/12/2019 à 14:37, Naema a écrit :

Bonjour,
Je partage cette info au cas où ça serve à d'autres : j'ai remarqué que les classes css ne sont prises en compte que lorsque leur syntaxe débute par une lettre.
Nommer une classe en commençant par un chiffre ne fonctionne pas (en tous cas, pas avec Firefox à jour).
ex. dans le fichier html, <code><div class="404-text"> </div></code> ne permet pas de prendre en compte la classe .404-text du fichier CSS.
Par contre, cela fonctionne si dans le fichier html, on a <code><div class="page_404-text"> </div></code> avec la classe .page_404-text du fichier CSS.

Salut,

en fait, et pour préciser, il est tout à fait possible d'utiliser des classes et des identifiants qui commencent par des chiffres, c'est tout à fait valide du point de vue HTML5.

Mais c'est en CSS que ça coince : les spécs précisent qu'un identifiant ne peut pas commencer par un chiffre :

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

https://www.w3.org/TR/CSS21/syndata.html#characters

Donc si le html utilise quand même une classe comme 404-text, il faut alors le cibler dans la feuille de style par l'attribut, avec [class="404-text"] au lieu de .404-text :

[class="404-text"] {
   ...
}

Idem pour les identifiants qui commencent par un chiffre (ex : id="404-text") à cibler avec [id="404-text"]

Mais bon, au vu de cette subtilité, il vaut mieux effectivement faire commencer tous ses identifiants de classes par une lettre :slight_smile:

--
nicod_