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

Question

In CSS combining selectors with space means descendance.

But in another answer How to combine class and ID in CSS selector? I read, that similar syntax means coinciding selected markers in one tag.

Does CSS parser really distinguish space and no-space, or this is the same syntax which is just working in both cases?

Answer 1

A space in CSS selectors, like:

.foo .bar {...

indicated a descendant element. This would target the inner div with class "bar" for example,

<div class="foo">foo
    <div class="bar">bar</div>
</div>

jsFiddle example

Removing the space means that the you are selecting an element has has both classes, like:

.foo.bar {...

Which would target the div with both classes foo and bar in this example:

<div class="foo">foo
    <div class="foo bar">foo and bar</div>
</div>

jsFiddle example

Answer 2

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>