How to select classes with spaces

Classes will never actually have spaces in their name. In your example, that is actually two classes; boolean and optional.

to apply style to an element that has both of those classes, the construct is

.boolean.optional {
 /* CSS */
}

However, IE6 is known to have some issues with this. See this link for more details on known quirks.


Those are not classes with spaces :) They are called multiple class selectors.

You basically just need to make sure all the class names are connected (no spaces between them) and separated with a dot.

.boolean.optional {

}

As Zepplock says, that's actually two classes in a single attribute: boolean and optional. The space is not part of a class name; it acts as the separator.

These three selectors will all match it:

.boolean
.optional
.boolean.optional

The last selector only picks up this element as it has both classes.

You never include a space when chaining class selectors, not even like this:

.boolean .optional

As that selects .optional elements that are contained within separate .boolean elements.