4

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?

Community
  • 1
  • 1
Dims
  • 47,675
  • 117
  • 331
  • 600

3 Answers3

12

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>
Boaz
  • 19,892
  • 8
  • 62
  • 70
probablyup
  • 7,636
  • 1
  • 27
  • 40
  • Thanks for the assist Boaz - didn't know the hashes caused wonky formatting! – probablyup Apr 23 '13 at 17:27
  • No problem. Also note how backsticks are used to format inline code snippets. See [StackOveflow - Markdown help](http://stackoverflow.com/editing-help) – Boaz Apr 23 '13 at 17:32
5

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

j08691
  • 204,283
  • 31
  • 260
  • 272
2

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 {...}

Boaz
  • 19,892
  • 8
  • 62
  • 70
jball037
  • 1,780
  • 1
  • 14
  • 18