CODEWITHSUNDEEP
htmlcss
Hugo Hilário
Hugo Hilário

Reputation: 2908

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 ! ";
}

Upvotes: 4

Views: 1252

Answers (2)

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

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.

Upvotes: 5

Hugo Hilário
Hugo Hilário

Reputation: 2908

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/

Upvotes: 1

Related Questions