Как выбрать классы с пробелами

Ответ 1

Как пишет Zepplock, на самом деле два класса в одном атрибуте: boolean и optional. Пространство не является частью имени класса; он действует как разделитель.

Эти три селектора будут соответствовать этому:

.boolean
.optional
.boolean.optional

Последний селектор только подбирает этот элемент, поскольку он имеет оба класса.

Вы никогда не включаете пробел при наборе селекторов классов, даже не так:

.boolean .optional

Как это выбирает элементы .optional, которые содержатся в отдельных элементах .boolean.

Ответ 2

Это не классы с пробелами:) Они называются несколькими селекторами классов.

Вам просто нужно убедиться, что все имена классов связаны между собой (нет пробелов между ними) и разделены точкой.

.boolean.optional {

}

Ответ 3

Пробелы недопустимы в имени класса. class="boolean optional" означает, что у элемента есть классы boolean и optional, поэтому вы можете сопоставить его с .boolean, .optional или если вы хотите совместить только объекты, которые являются необязательными и логическими, с .boolean.optional.

Ответ 4

У классов никогда не будет пробелов в их имени. В вашем примере это фактически два класса; boolean и optional.

применить стиль к элементу, который имеет оба этих класса, конструкцией является

.boolean.optional {
 /* CSS */
}

Однако IE6, как известно, имеет некоторые проблемы с этим. См. эту ссылку для получения более подробной информации о известных причудах.

Ответ 5

Я понимаю, что это было давно, но в случае, если кто-то заинтересован, то, что я нашел удобным, также в том, как настроить/выделить элемент внутри элемента, который имеет оба класса... Пример

.boolean.optional > p {
    color: red;
}

Возможно, не требует объяснений, но: превращает "абзац текст красным" ТОЛЬКО для абзаца внутри элементов, где оба класса существуют i.e.b.boolean AND.optional

Ответ 6

Вопрос: имеет ли значение порядок в случае нескольких классов для селекторов CSS?

Является ли .boolean.optional равным .optional.boolean?