Que signifient les crochets dans les noms de classe ?

Question

J'ai vu aquí les crochets qui sont utilisés dans les noms de classe :

<input class="validate[required,custom[onlyLetter],length[0,100]]" name="firstname" type="text" />

Que signifient ces crochets ?

Answer 1

Les crochets sont utilisés comme sélecteur d'attribut, pour sélectionner tous les éléments qui ont une certaine valeur d'attribut. En d'autres termes, ils détectent la présence d'un attribut.

Exemple 1 :

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

n'affecterait que

<img src="picName.png" alt="picName" />

dans votre code, et n'affectera pas

<img src="picName.png" alt="picName2" />

Exemple 2 :

Ce qui suit affecte tous les éléments avec l'attribut title spécifié :

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

Exemple 3 :

Ce CSS

p[class~="fancy"]

affectera le html suivant

<p class="fancy">Hello</p>
<p class="very fancy">Hola</p>
<p class="fancy maybe">Aloha</p>

mais ça n'aura pas d'incidence :

<p class="fancy-fancy">Privet</p>

Exemple 4 :

[lang|="en"]

affectera les éléments avec l'attribut lang, qui est une liste de mots séparés par un trait d'union et commençant par "en", comme par exemple

<div lang="en">Tere</div>
<div lang="en-gb">GutenTag</div>

Exemples 5, 6, 7 : (CSS3)

Le sélecteur d'attributs suivant affecte les éléments de lien dont la valeur de l'attribut href commence par la chaîne "http :".

a[href^="http:"]

Le sélecteur d'attribut suivant affecte les éléments d'image dont la valeur de l'attribut src se termine par la chaîne ".png".

img[src$=".png"]

Le sélecteur d'attributs suivant affecte tout élément d'entrée dont la valeur de l'attribut name contient la chaîne "choice".

input[name*="choice"]

Answer 2

Elle est très probablement utilisée par une sorte de validateur ou de bibliothèque de validation. La classe ici signifie que valider ce champ désigné par validate mot-clé et ensuite :

required c'est un champ obligatoire
custom type de validation ; n'autorise que les lettres
length doit être compris entre 0 et 100 caractères

Eh bien, cette information est utilisée par la bibliothèque de validation jQuery dont vous avez posté l'adresse suivante lien à :)

Answer 3

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

Answer 4

Voici une excellente ressource qui explique plus de 30 types de sélecteurs. à net.tutsplus

Answer 5

En HTML standard, ils n'ont pas de signification particulière. C'est juste du texte supplémentaire.

Pour le plugin jQuery Validation, c'est le cas.