Que signifient les crochets dans les noms de classe?

Cela est probablement utilisé par une sorte de validateur ou de bibliothèque de validation. La classe signifie ici que valider ce champ désigné par un mot-clé validate puis:

required il est obligatoire
type de validation custom ; n’autorise que les lettres
length doit être comprise entre 0 et 100 caractères

Eh bien, cette information est utilisée par la bibliothèque de validation jQuery à laquelle vous avez posté le lien 🙂

Les crochets sont utilisés comme sélecteur d’atsortingbut pour sélectionner tous les éléments ayant une valeur d’atsortingbut donnée. En d’autres termes, ils détectent la présence d’un atsortingbut.

Exemple 1:

 img[alt="picName"] {width:100px;} 

n’affecterait que

dans votre code, et n’affectera pas

Exemple 2:

Ce qui suit concerne tous les éléments avec l’atsortingbut title spécifié:

 [title] {border:1px dotted #333;} 

Exemple 3:

Ce CSS

 p[class~="fancy"] 

affectera le HTML suivant

 
Hello
 
Hola
 
Aloha 

mais n’affectera pas ceci:

 
Privet 

Exemple 4:

 [lang|="en"] 

affectera les éléments avec l’atsortingbut lang, qui est une liste de mots séparés par un trait d’union commençant par «en», comme

 
Tere
 
GutenTag 

Exemples 5, 6, 7: (CSS3)

Le sélecteur d’atsortingbut suivant affecte les éléments de liaison dont la valeur d’atsortingbut href commence par la chaîne “http:”.

 a[href^="http:"] 

Le sélecteur d’atsortingbut suivant affecte les éléments d’image dont les valeurs d’atsortingbut src se terminent par la chaîne «.png».

 img[src$=".png"] 

Le sélecteur d’atsortingbut suivant affecte tout élément d’entrée dont l’atsortingbut name contient la chaîne «choice».

 input[name*="choice"] 

Hormis le cas d’utilisation / exemple donné par l’OP pour les parenthèses dans les noms de classe, il y a aussi un autre cas d’utilisation proposé par Harry Roberts (et plus tard arrêté) sur son blog: regrouper les classes associées dans votre balisage les parenthèses pourraient être utilisées pour grouper

deux ou plusieurs atsortingbuts de classe liés pour les rendre plus faciles à remarquer lors de l’parsing d’un fichier HTML

…

et cela ressemble à ceci:

où:

• Il doit y avoir plus d’un ensemble de classes.
• Un «ensemble» doit contenir plusieurs classes.

Il a également noté que l’ajout des crochets est complètement valide selon la spécification html5

Il n’y a pas de ressortingctions […] sur les jetons que les auteurs peuvent utiliser dans l’atsortingbut de classe…

Juste pour répéter:

Les crochets dans les atsortingbuts de classe – tout en étant des noms de classe CSS valides ne sont pas réellement destinés à être utilisés dans le CSS ¹ – mais plutôt pour aider à la lisibilité dans le code HTML.

Remarques:

¹ Bien que techniquement, ils peuvent être utilisés une fois évadés ,

 .\[ { color: red; } 

 
Hi there 

Voici une excellente ressource expliquant plus de 30 types de sélecteurs sur net.tutsplus.com

Rien. Les parenthèses sont un caractère légal pour les noms de classe sans aucune signification particulière.

En HTML standard, ils n’ont aucune signification particulière. C’est juste plus de texte.

Pour le plugin jQuery Validation, ils le font.

Il n’y a pas de règle particulière dans un nom de classe. Dans votre exemple, ils sont presque certainement utilisés par un cadre de validation JavaScript. En effet, en HTML, vous ne pouvez pas simplement append vos propres atsortingbuts aux balises. Par conséquent, le cadre de validation exploite le fait que les noms de classes CSS peuvent contenir de tels caractères pour stocker les règles de validation dans le nom de la classe. Il n’y aura pas de classe correspondante dans la feuille de style – c’est juste une astuce pour contourner les limites du HTML.