What do square brackets in class names mean?

Question

I saw here 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

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"]

Answer 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 :)

Answer 3

Apart from the use-case / example given by the OP for brackets in class names, there is also another use case which Harry Roberts proposed (and later stopped proposing) in his blog a while back: grouping related classes in your markup where the square brackets could be used to group

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

...

and that 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 adding the brackets is completely valid according to the html5 spec

There are no […] restrictions on the tokens authors can use in the class attribute…

Just to reiterate:

The brackets in the class attributes - while being valid CSS class names are not actually meant to be used in the CSS¹ - but rather to help readability in the HTML.

---

Notes:

¹Although technically, they can be used when escaped,

.\[ {
  color: red;
}

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