Basis van volgordes in CSS

In CSS zijn er bepaalde basis regels en dingen die je eerst zult moeten begrijpen voordat je verder kan. Een paar van deze regels:

1. IDs gaan voor classes
2. Classes gaan voor tags
3. Als iets op het zelfde niveau zit gaat de gene die als laatst wordt gemaakt voor.

Met regel 3 bedoel ik:

1
2

#box { background: red;   }
#box { background: green; }

Dan wordt de background green van #box. Deze regel is erg belangrijk voor het verloop van deze tutorial.

Link condities

Een link heeft verschillende condities die je kunt stijlen met CSS:

• :link - Als de link een echte link is en dus een href attribuut bevat
• :visited - Als je de link al een keer eerder hebt bezocht
• :hover - Als je met de muis over de link gaat
• :active - Het moment dat je op de link klikt

Deze condities kun je allemaal een aparte stijl meegeven. Bijvoorbeeld:

1
2

a       { text-decoration: none;      }
a:hover { text-decoration: underline; }

Nu zal er een lijn onder de tekst komen als je er met je muis overheen gaat. Even voor de geïnteresseerden, alles in CSS met :* heten pseudo classes.

Het probleem

Het probleem is de volgorde waarin je deze condities zet. Stel je wilt alle condities een stijl geven. Dan zul je hebben dat de ene stijl de andere overrulled en dat je daardoor nooit de echte stijl ziet.

Stel we hebben een link waarop je al een keer bent geweest en we hebben de volgende CSS:

1
2

a:link    { color: red;   }
a:visited { color: green; }

Nu komt dit bij de browser binnen, hij denkt: ‘Hé, je het is een echte link’ en vervolgens stijlt hij de link naar color: red;. Nu leest hij verder en denkt hij: ‘Ja, hij is er al een keer eerder op geweest’ vervolgens overrulled hij de stijlen van :link in die van :visited en wordt de link green.

Stel dat we nu :link en :visited omdraaien. Dan komt de browser eerst visited tegen, hij weet dat je hem al een keer eerder hebt bezocht en begint de anchor color: green; mee te geven. Vervolgens komt hij bij de volgende en denkt, ja het is een echte link. Nu worden de visited stijlen overrulled door de link stijlen en wordt de link dus color: red;. Het gevolg is dus dat alle stijlen van visited overrulled worden.

Om dit te voorkomen moeten we een goede volgorde aan houden. Deze volgorde is de volgorde waarin ik in het begin deze pseudo classes heb genoemd. Laten we nu eens kijken wat er allemaal gestijld wordt als we op een link klikken die we al eens hebben bezocht:

1. Het browser komt bij :link en stijlt de link naar deze stijlen
2. Het browser komt bij :visited en denkt, ja, dit ook, en overrulled de stijlen van :link
3. Het browser komt bij :hover en ja, je gaat er met je muis over. Dus deze stijlen overrullen de vorige
4. Het browser komt bij :active en ja, je klikt er ook nog eens op. Dus ook deze stijlen worden toegevoegd.

Uiteindelijk krijgt je link dus 4 verschillende stijlen mee die elkaar allemaal overrullen.

Een ezelsbruggetje

Om deze volgorde te onthouden is er een ezelsbruggetje uitgevonden die je hier al een keer bent tegen gekomen, namelijk: LoVe HAte de dik gedrukte hoofdletters vormen hier de beginletters van de pseudo classes.