When Combining Selectors Does Space Means The Same As No Space?

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 ma

Solution 1:

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

<divid="tag"><divclass="flower"></div></div>

Solution 2:

A space in CSS selectors, like:

.foo .bar {...

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

<divclass="foo">foo
    <divclass="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:

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

jsFiddle example

Solution 3:

To select .bee which is direct descendant of .aye:

.aye > .bee {...}

To select element .aye and element .bee:

.aye, .bee {...}

To select .bee which is just a descendant of .aye (not necessarily direct descendant):

.aye .bee {...}

To select an element that is both .aye and .bee:

.aye.bee {...}