Что означают квадратные скобки в именах классов?

Ответ 1

Это скорее всего используется какой-либо валидатор или библиотека проверки. Класс здесь означает, что проверяйте это поле, обозначенное ключевым словом validate, а затем:

required требуется поле
custom тип проверки; разрешить только буквы
length должно быть от 0 до 100 символов

Ну, эта информация используется библиотекой проверки jQuery, вы отправили ссылку в:)

Ответ 2

Квадратные скобки используются в качестве селектора атрибутов для выбора всех элементов, имеющих определенное значение атрибута. Другими словами, они обнаруживают присутствие атрибутов.

Пример 1:

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

повлияет только на

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

в вашем коде и не повлияет на

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

Пример 2:

Ниже перечислены все элементы с указанным атрибутом title:

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

Пример 3:

Этот CSS

p[class~="fancy"]

повлияет на следующий html

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

но не повлияет на это:

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

Пример 4:

[lang|="en"]

будет влиять на элементы с атрибутом lang, который представляет собой дефисно-разделенный список слов, начинающихся с "en", например

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

Примеры 5, 6, 7: (CSS3)

Следующий атрибут селектора влияет на элементы ссылок, значение атрибута href начинается со строки "http:".

a[href^="http:"]

Следующий атрибут селектора влияет на элементы изображения, значения атрибутов src которых заканчиваются строкой ".png".

img[src$=".png"]

Следующий селектор атрибутов влияет на любой элемент ввода, значение атрибута имени которого содержит строку "выбор".

input[name*="choice"]

Ответ 3

Здесь большой ресурс, объясняющий более 30 типов селекторов при net.tutsplus.com

Ответ 4

Ничего. Скобки являются юридическим символом для имен классов без какого-либо особого значения.

Ответ 5

Помимо примера использования/примера, данного OP для скобок в именах классов, есть еще один случай использования, который Гарри Робертс предложил (а позже и прекратил предлагать) в своем блоге некоторое время назад: группировка связанных классов в вашей разметке, где квадратные скобки можно использовать для группировки

два или более связанных атрибута класса, чтобы их было легче заметить при сканировании файла HTML

...

и выглядит примерно так:

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

где:

• Должно быть более одного набора классов.
• Один 'набор должен содержать более одного класса.

Он также отметил, что добавление скобок полностью действует в соответствии с спецификацией html5

Нет ограничений [...] для авторов токенов, которые могут использоваться в class attribute...

Просто повторю: скобки в атрибутах класса - будучи действительным именем класса CSS, на самом деле не предназначены для использования в CSS (хотя они могут использовать при экранировании),

.\[ {
  color: red;
}

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

Ответ 6

В стандартном HTML они не имеют особого значения. Это просто текст.

В плагин jQuery Validation они делают.

Ответ 7

В имени класса нет определенного правила. В вашем примере они почти наверняка используются инфраструктурой проверки JavaScript. Это связано с тем, что в HTML вы не можете просто добавить свои собственные атрибуты в теги, поэтому в структуре проверки используется тот факт, что имена классов CSS могут содержать такие символы, чтобы "хранить" правила проверки в имени класса. На самом деле не будет никакого соответствующего класса в таблице стилей - это всего лишь трюк, чтобы обойти ограничения HTML.