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