CSS selectors (advanced)

CSS selectors er et uunværligt værktøj at have, men der er rigtigt mange forskellige situationer de virker på, og man skal stykke dem sammen.

Så sent som i dag lærte jeg at der var forskel på

1. div > a
2. div a

fordi den første (1) er direct child selector og den anden er descendant/child selector.
Forskellen er om a ikke må ligge inde i noget andet under div, eller om den må være placeret alle steder så længe den er under div.
Situation 1 der er det kun tilladt at have a i første niveau under div, hvor i situation 2 er det tilladt alle steder bare den ligger under div.
Så følgende situation:
<div>
<span>
<a></a>
</span>
</div>

Der vil situation 1 ikke blive ændret noget, fordi din selector siger a skal være inde i div og ikke i en span, men situation 2 vil virke fordi så længe du har et a inde i en div vil selectoren virke uanset hvor langt inde den er placeret.

For mere information omkring CSS selectors se her: http://learn.shayhowe.com/advanced-html-css/complex-selectors/