What do square brackets in class names mean?

Solution 1:

The square brackets are used as an attribute selector, to select all elements that have a certain attribute value. In other words, they detect attribute presence.

Example 1:

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

would affect only

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

in your code, and won't affect

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

Example 2:

The following affects all elements with title attribute specified:

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

Example 3:

This CSS

p[class~="fancy"]

will affect the following html

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

but won't affect this:

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

Example 4:

[lang|="en"]

will affect elements with lang attribute, which is hyphen-separated list of words beginning with “en”, like

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

Examples 5, 6, 7:(CSS3)

The following attribute selector affects link elements whose href attribute value starts with the string “http:”.

a[href^="http:"]

The following attribute selector affects image elements whose src attribute values ends with the string “.png”.

img[src$=".png"]

The following attribute selector affects any input element whose name attribute value contains the string “choice”.

input[name*="choice"]

Solution 2:

That is most likely used by some sort of validator or validation library. The class here means that validate this field denoted by validate keyword and then:

required it is required field
custom validation type; allow only letters
length should be between 0 to 100 chars

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