Css Space Before Selector

I was struggling to understand why this simple CSS class selector was not being picked by my HTML element. .label-hi :before { color:green; content: 'Hi ! '; }

Solution 1:

The space between simple selectors is a descendant combinator in CSS. If it were two ordinary selectors separated with space, it would mean 'element matching the second selector, placed anywhere inside the element matching the first selector'. Since the second selector is a pseudo element, the whole selector is equivalent to .label-hi *:before, potentially inserting something into any element inside the element with class label-hi.

Solution 2:

So I realized that for this specific selectors I cannot have any space between the class name and the : This means that removing the empty space my CSS class is picked :

.label-hi:before {
    color:green;
    content: "Hi ! ";
}

In regular classes that space does not make any difference.

Sample here : http://jsfiddle.net/GtTcn/