Przestrzeń CSS przed selektorem - html, css

Starałem się zrozumieć, dlaczego ten prosty selektor klasy CSS nie został wybrany przez mój element HTML.

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

Odpowiedzi:

Przestrzeń między prostymi selektorami to a kombinator potomka w CSS. Gdyby były to dwa zwykłe selektory oddzielone spacją, oznaczałoby to „element pasujący do drugiego selektora, umieszczony gdziekolwiek wewnątrz elementu pasującego do pierwszego selektora”. Ponieważ drugi selektor jest pseudoelementem, cały selektor jest równoważny .label-hi *:before, potencjalnie wstawiając coś każdy element wewnątrz element z klasą label-hi.

Więc zdałem sobie sprawę, że dla tego konkretnego selektora nie mogę mieć spacji między nazwą klasy a : Oznacza to, że usunięcie pustej przestrzeni jest wybierane przez moją klasę CSS:

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

W klasach regularnych przestrzeń nie ma znaczenia.

Przykład tutaj: http://jsfiddle.net/GtTcn/