CSS - werken met pseudo class

Naast de Class mogelijkheden heeft CSS ook de mogelijkheid nog een aantal Pseudo Class te definiëren. Daarmee kun je de gewenste stijl nog verder beïnvloeden. In dit artikel zullen een aantal voorbeelden aan de orde komen om je meer gevoel te gaan geven bij een Pseudo Class.

Pseudo Class schrijfwijze CSS

Op een internetsite kom je vaak tegen dat als je met je muis over een stuk tekst gaat, dat de kleur of opmaak van dat stuk tekst verandert. Je kunt dit effect ook zelf bereiken met de juiste informatie.

In een eerder artikel over CSS heb je kunnen lezen hoe de juiste schrijfwijze van CSS luidt. Je hanteert altijd de volgorde selector {property: value}.

Als je een class hebt gedefinieerd, dan is de volgorde selector.class {property: value}. En als je een pseudo class hebt, hanteer je de volgorde selector:pseudo-class {property: value}.

Tot slot kun je ook nog een class toevoegen met daarna nog een pseudo class. De volgorde is dan selector.class:pseudo-class {property: value}

Pseudo class links

Dan nu het echte werk. In de opzet van je site kun je de volgende CSS pseudo classes gaan opnemen en testen.

A:link {color: value} /* kleur van nog niet bezochte link */
A:visited {color: value} /* kleur van een reeds bezochte link */
A:hover {color: value} /* kleur bij bewegen muis over de link */
A:active {color: value} /* kleur van een link als je erop klikt en ingedrukt houdt*/

Let op: de volgorde van deze pseudo classes zijn dwingend.

In deze pseudo classes kun je alle eigenschappen van de links op je site bepalen. Niet alleen de kleur van de tekst, maar ook de achtergrondkleur, lettertype, grootte, dikgedrukt, schuin enzovoorts.

Voorbeeld

A:link {background-color: silver; color: red;}

Een normale link krijgt de achtergrondkleur zilver en de kleur van de tekst is rood. Vervolgens zal iedere Anchor tag in je site deze eigenschappen krijgen (mits je natuurlijk het CSS bestand juist aanroept).

Werken met class en pseudo class

Nu zijn er voorbeelden te bedenken waarin dit niet wenselijk is. Als je bijvoorbeeld een navigatiescherm hebt met verschillende links en in je site ook links hebt staan, wil je misschien helemaal niet dat alle links dezelfde lay-out krijgen. Je kunt dit verder gaan specificeren door voor iedere soort link een class te gaan definiëren. Je krijgt dan bijvoorbeeld de volgende opzet:

Voorbeeld

A:hulp:link {background-color: blue;}

Nu kun je vervolgens de afwijkende links een aparte lay-out gaan geven door in de Anchor tag de juiste class naam op te nemen. Dit zal als volgt eruit zien:

Voorbeeld

<a class=”hulp” href=”…”>…</a>

Hover pseudo class

De hover pseudo class kun je bij alle soorten selectors gebruiken. Als je wilt dat een alinea van kleur verandert als je er met je muis overheen gaat, dan kan dat. Het volgende voorbeeld realiseert dit voor je.

Voorbeeld

p:hover {color: red;}

Iedere alinea die start met een Paragraph tag zal deze eigenschap gaan krijgen. Ook hier geldt dat als je werkt met een class, je deze eigenschap veel specifieker kunt toewijzen aan de door jou gewenste alinea’s. In de tag <p>…</p> komt dan te staan class=”naam”. Inmiddels kun je zelf het voorbeeld uitwerken, Succes!