When combining selectors, does space mean the same as space?

Question

In CSS combining a selector with a spatial value of descendance .

But in another answer How to combine class and ID in CSS selector? I read that similar syntax means matching selected markers in the same tag.

Is the CSS separator really distinguishing between space and non-space, or is it the same syntax that only works in both cases?

Answer 1

Yes, spaces are significant in CSS rules.

#tag.flower means an element with id="tag" and class="flower" , where #tag .flower means an element with class="flower" inside 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> 

Answer 2

Space in CSS selectors, for example:

 .foo .bar {... 

the descendant element is specified. This would target the inner div using the bar class, for example,

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

JsFiddle example

Removing a space means that the element you selected has both classes, for example:

 .foo.bar {... 

This example will target a div with two classes foo and bar:

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

JsFiddle example

Answer 3

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

.aye> .bee {...}

To select a .aye element and a .bee element:

.aye, .bee {...}

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

.aye.bee {...}

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

.aye.bee {...}