What do square brackets mean in class names?

Question

I saw here the square brackets that are used in class names:

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

What do these square brackets mean?

Answer 1

This is most likely used by some kind of validator or validation library. The class here means that check this field indicated by the validate keyword, and then:

required field required
custom check type; allow letters only
length must be between 0 and 100 characters

Well, this information is used by the jQuery validation library, you sent the link to :)

Answer 2

Square brackets are used as an attribute selector to select all elements that have a specific attribute value. In other words, they detect the presence of attributes.

Example 1:

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

will only affect

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

in your code and will not affect

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

Example 2:

Listed below are all elements with the specified title attribute:

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

Example 3:

This CSS

 p[class~="fancy"] 

will affect the next html

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

but will not affect this:

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

Example 4:

 [lang|="en"] 

will affect elements with the lang attribute, which is a hyphenated list of words starting with "en", for example

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

Examples 5, 6, 7: (CSS3)

The following selector attribute affects link elements; the value of the href attribute begins with the string "http:".

 a[href^="http:"] 

The following selector attribute affects image elements whose src attribute values ​​end with the string ".png".

 img[src$=".png"] 

The following attribute selector affects any input element whose name attribute value contains the string "selection".

 input[name*="choice"] 

Answer 3

Here's a great resource explaining over 30 types of selectors at net.tutsplus.com

Answer 4

Nothing. Brackets are a legal symbol for class names without any special meaning.

Answer 5

In addition to the use case / example given by OP for parentheses in class names, there is another use case that Harry Roberts suggested (and later stopped offering) on ​​his blog some time ago: grouping related classes in your markup where square brackets can be used for grouping

two or more related class attributes to make them easier to notice when scanning an HTML file

...

and looks something like this:

 <div class="[ foo foo--bar ] baz"> 

Where:

• There must be more than one set of classes.
• One set must contain more than one class.

He also noted that the addition of brackets is fully in accordance with the html5 specification

There are no restrictions [...] for token authors that can be used in class attribute ...

Just to repeat: the brackets in the class attributes - being the real name of the CSS class, are actually not intended for use in CSS ( although they can be used when escaping ),

 .\[ { color: red; } 

 <div class="[">Hi there</div> 

.... but rather for readability in HTML.

Answer 6

In standard HTML, they have no special meaning. This is just text.

In the jQuery Validation plugin they do.

Answer 7

There is no specific rule in the class name. In your example, they are almost certainly used by the JavaScript validation framework. This is because in HTML you cannot simply add your own attributes to tags, therefore, the fact that CSS class names can contain characters to "store" validation rules in the class name is used in the validation structure. In fact, there will be no corresponding class in the stylesheet - this is just a trick to get around the limitations of HTML.