What's the Difference Between CSS Classes .Foo.Bar (Without Space) and .Foo .Bar (With Space)

What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)

I think you got a slight misunderstanding what the first one means.

.element .symbol {}

Means that those CSS settings are applied to any HTML element with the class .symbol that is inside an element with the class .element.

<div class="element">
    <div class="symbol" />
</div>

In this example your first CSS entry would affect the <div> tag in the middle.

Your second example means that the first class requires two classes to be affected. Other than that it's equal to the first one.

<div class="element large">
    <div class="symbol" />
</div>

So if the HTML looks like this, the CSS values will be applied to the inner <div> tag as well.

If you want to set CSS tags that apply for multiple classes separately then you need to split them up using a comma. So it looks like this:

.element, .symbol {}

Edit: By request the link to the documentation of the CSS selectors.

Multiple class definitons with space means something?

Yes. In CSS selectors, unlike Javascript for example, whitespace is not ignored.

.A.B Will select elements that have both class A and class B.

.A .B Will select any .B class elements that are inside .A class elements.

Example:

<A class="A B">
    <B class="A"></B>
    <B class="B"></B>
</A>

In this case:

.A.B Will return only the <A class="A B"> element.

.A .B Will return <B class="B">, as it is a B class element inside an A class element.

Sources:

• Stack Overflow: CSS Selectors, > versus space
• CSS Tricks: Multiple Selectors

CSS subclass with and without space

.nav .left means your are targeting .left within the .nav element like

<div class="nav><div class="left"></div></div>

Where as .nav.left means both classes are on the same element like

<div class="nav left"><div></div></div>

A quick google would have probably found you and answer to this, try taking a read of w3c schools its a good place to start http://www.w3schools.com/cssref/css_selectors.asp

when declaring css styles, what is the meaning of .classA.classB (two class names with a dot in the middle and no space)

The first example (space-separated classes) is a parent-child relationship. .classB is found inside .classA.

<div class="classA">
    <div class="classB"></div>
</div>

The second is for one element with multiple classes, like so:

<div class="classA classB"></div>

Very different situations, but both extremely useful!

Further reading here:

css select an element with 2 class

http://css-tricks.com/multiple-class-id-selectors/

When combining selectors does space means the same as no space?

Yes, spaces are significant in CSS rules.

#tag.flower means an element with both id="tag" and class="flower", where #tag .flower means an element with class="flower" inside of an element with id="tag".

For instance:

#tag.flower

<div id="tag" class="flower"></div>

#tag .flower

<div id="tag">
    <div class="flower"></div>
</div>

What does the dot mean in CSS?

A . prefix usually represents a class selector, but if it's immediately followed by whitespace then it's a syntax error.

If I were to hazard a guess, then it's likely the author meant to say .work-container > h3, but missed the Shift key just as he was about to type the > character (the child combinator).

Your second selector, .work-container h3, simply means any h3 that's contained within an element with a class called work-container.

Class names concatenated or separated by a space

You separate classes by a space when you want to refer to descendant element and you concatenate them when you want to refer to a single element with multiple classes.

For example, to refer to a div with two classes, e.g. <div class="foo bar"> you could use:

div.foo.bar {...}

To refer to the child span element <div class="foo"><span class="bar">stuff</span></div> you could use:

div.foo .bar {...}

Not using Adjoining Classes Breaks Style?

When styles are joined like:

li.operation.post div.content

Then your html looks like:

<ul>
  <li class="operation post">
     <div class="content">
       //something
     </div>
  </li>
</ul>

So the classes are wrapped together in one tag basically.

When it's:

li .operation .post div .content

your html looks like:

<ul>
  <li>
    <div class="operation>
      <div class="post">
         <div>
           <div class="content">
             // something
           </div>
         </div>
      </div>
    </div>
  </li>
</ul>

So it's more hierarchical and cascading into a final element.

---

Related Topics