when to leave space ,when not in CSS?

Question

This is ok(without space):

li.highlight{
    background:#FF9900 none repeat scroll 0 0;
}

This will not work(with space):

li .highlight{
    background:#FF9900 none repeat scroll 0 0;
}

Why?

Answer 1

The latter selector won't work because the space implies the relationship (in this case a descendant) between the selectors.

li.highlight /* defines an element of 'li' with a classname of 'highlight' */

li .highlight /* defines an element of class 'highlight' that's contained within an li element */

li > .highlight /* as pointed out by Neil (in comments), this would select an element of class highlight that is an immediate child/descendant of an li */

I should explain my use of the phrase "won't work." Clearly I used your phrasing, and I did so in error.

It will work, it's just that it will select -as explained in the comment- an element that you don't have in your markup.