How do have a single class name with a space in it using CSS

Question

I have HTML like this:

<div class = "address full">

I want to add css. How do I write a selector for a class with a space in it? This is not doing waht I want.

."address info" {
  background: #eee;
}

Answer 1

You can't - there is no way of having a space within a single classname. So the element you've provided there doesn't have a 'class name with a space in it'. The element has two different classes address and full. You can of course target this element by specifying both classes like this:

.address.full{}

If you really want 'spaces' in your class name, you'll need another way of clarifying what you see as a space, such as hyphenation:

<div class = "address-full">

Or maybe camel-case

<div class = "addressFull">

Answer 2

You can't have CSS classes with spaces in them.

What you have are two seperate classes, address and full.

You can specify both of these in a selector as follows:

.address.full
{
   background: #eee;
}

Answer 3

The two words will be treated as separate classes. If they will always be used together, consider separating with a hyphen or underscore instead. However, you can target the classes using:

.address.info {
    background: #eee;
}

This is essentially identifying an element with both the class address and the class info. That is technically different from targeting a class of address info.

For example, if you then had a following rule applied to just address it would also be applied to this element.

Answer 4

This is actually 2 classes: address and full

To apply a style to an element having both classes do this:

.address.info {
      background: #eee;
}

...be sure there is no space between the dot-separated class-names in your selector.

Answer 5

A class cannot have space. It must begin with an underscore, a dash or letter. Also, a class name must be two characters long.

Use hyphen or underscore instead.

Read this for more information.