Classes CSS valides?

Question

Les noms de classe suivants sont-ils valides?

.text-moretext 

.text&text 

.text_text 

.text(text) 

Je suppose qu'une classe CSS est autorisée à contenir des caractères spéciaux?

Answer 1

• .text-moretext est autorisé
• .text&text n'est pas autorisé, car le & est un caractère spécial en HTML
• .text_text est autorisé
• .text(text) n'est pas autorisé

Answer 2

caractères AZ, az, les chiffres, les tirets (-) et les traits de soulignement (_) sont les caractères communs autorisés dans un nom de classe. (Il existe d'autres caractères spécifiques à la culture autorisés, mais aucune autre ponctuation.)

Donc, text-moretext et text_text sont des noms de classe valides.

En cas de doute, soyez restrictif avec la ponctuation et les caractères exotiques. Certains navigateurs plus anciens peuvent ne pas toujours avoir raison ...

Answer 3

Oui, vous pouvez utiliser n'importe quel caractère dans un nom de classe à l'exception des espaces qui séparent les noms de classe: class is a cdata-list. Certains caractères devraient s'échapper. Pour HTML:

<div class="text&amp;moretext"> ... </div> 

et dans un sélecteur:

.text\&text { ... } 
.text\(text\) { ... } 

Il est généralement préférable d'éviter, si possible, pour le codage santé mentale, mais oui vous pouvez le faire si vous avez besoin.

Answer 4

Selon la spécification CSS, Section 4.1.3:

En CSS, les identifiants (y compris noms d'éléments, les classes et les ID dans sélecteurs) ne peuvent contenir que les caractères [a-zA-Z0-9 ] et ISO 10646 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 d'un chiffre. Les identificateurs peuvent également contenir des caractères échappés et tout caractère ISO 10646 sous la forme d'un code numérique (voir élément suivant). Pour l'instance , l'identificateur "B & W?" peut être écrit comme "B \ & W \?" ou "B \ 26 W \ 3F".

Ainsi, .text-moretext et .text_text sont des identifiants valides (et peuvent être utilisés comme noms de classe), alors que .text&text et .text(text) ne sont pas (bien que @bobince a fait remarquer, vous pouvez échapper aux caractères spéciaux afin de les utiliser comme partie d'un identifiant).