How to select classes with spaces

Question

How do I select a class like class="boolean optional" ?

I have tried this:

.boolean optional {CSS}

.boolean_optional {CSS}

Answer 1

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.

Answer 2

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 {

}

Answer 3

Spaces are not valid in class name. class="boolean optional" means the element has the classes boolean and optional, so you can match it with either .boolean, .optional, or if you want to match only objects that are both optional and boolean, with .boolean.optional.

Answer 4

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.

Answer 5

I appreciate this was a while ago, but in case anyone's interested, something I've found handy also is, how to target/select an element within an element which has both classes... EXAMPLE

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

Perhaps requires no explanation, but: turns 'paragraph text red' ONLY for paragraph's inside of elements where both classes exist i.e.both .boolean AND .optional