CSS space before selector

Question

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:          


        

Answer 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.