Websites met stijl

Naslag: Pseudo classes en pseudo elementen

Op dit naslagblad

Pseudo classes

Een pseudo class dient om elementen in een bepaalde staat/positie te selecteren. Een pseudo class begint met een dubbele punt.

Vorm

Een pseudo class kan samen met een element, een class of een id een selector vormen:
element:pseudoclass
of element.class:pseudoclass
of .class:pseudoclass
of element#id:pseudoclass
of #id:pseudoclass

Pseudo class selectors voor hyperlinks

Het meest gebruikte zijn de pseudo class selectors voor hyperlinks:

Selecteert nog niet bezochte links.

Voorbeeld
a:link { color: green; } Klik op mij en kijk of er wat gebeurt.

Alle links waarop je nog niet hebt geklikt hebben groene letters.

Opmerkingen

:visited

Selecteert alle bezochte links.

Voorbeeld
a:visited { color: red; } Klik op mij en kijk of er wat gebeurt.

Alle bezochte links (links waarop je eerder hebt geklikt) hebben rode letters.

Opmerking

:hover

Selecteert de link die met de muis wordt aangewezen

Voorbeeld
a:hover { background-color: yellow; } Wijs mij aan met de muis

De link die met de muis wordt aangewezen krijgt een gele achtergrond.

Opmerking:

De pseudo class selectors voor hyperlinks moeten worden gebruikt in de volgorde a:link, a:visited, . a:hover,a:active. Niet alle selectors hoeven te worden gebruikt. Voor de niet gebruikte selectors geldt dan de standaard opmaak voor links.

Standaard opmaak voor links in de meeste browsers: niet bezochte link, bezochte link actieve link.
Bij aanwijzen met de muis verandert de cursor in een handje.

:active

Selecteert de actieve link, dat is de link op het moment dat die wordt aangeklikt (zolang de muisknop nog niet is losgelaten)

Voorbeeld
a:active {border: 1px solid black;} Klik mij en laat de muisknop niet meteen los.

De link wordt omkaderd als die wordt aangeklikt (tussen het moment dat de muisknop wordt ingedrukt en het moment dat de muisknop wordt losgelaten.)

Opmerking:

De pseudo class selectors voor hyperlinks moeten worden gebruikt in de volgorde a:link, a:visited, . a:hover,a:active. Niet alle selectors hoeven te worden gebruikt. Voor de niet gebruikte selectors geldt dan de standaard opmaak voor links.

Standaard opmaak voor links in de meeste browsers: niet bezochte link, bezochte link actieve link
Bij aanwijzen met de muis verandert de cursor in een handje.

Enkele andere pseudo class selectors

De onderstaande voorbeelden tonen tabel cellen (element td) - de parent is dan het element tr).
Maar de pseudo selectors kunnen evengoed gebruikt worden bij andere elementen. Denk bijvoorbeeld aan alinea's binnen een article, of hyperlinks binnen een nav element. .

:first-of-type

Selecteert het eerste element van de betreffende soort binnen de parent.

Voorbeeld
td:first-of-type {background-color: green;}

De eerste cel van elke rij krijgt een groene achtergrond.

:last-of-type

Selecteert het laatste element van het betreffende soort binnen de parent.

Voorbeeld
td:last-of-type {background-color: green;}

De laatste (achterste) cel van elke rij krijgt een groene achtergrond.

:nth-of-type(n)

Selecteert het ne element van het betreffende soort binnen de parent.

Het n kan een positief getal zijn; of odd (oneven) of even.

Voorbeeld
td:nth-of-type(4) {background-color: green;}

De 4e cel van elke rij krijgt een groene achtergrond.

Nog een voorbeeld
td:nth-of-type(odd) {background-color: green;}

De oneven cellen krijgen een groene achtergrond.

Opmerkingen:

:nth-last-of-type(n)

Selecteert het ne element van het betreffende soort binnen de parent, vanachter af.

Voorbeeld
td:nth-last-of-type(2) {background-color: green;}

De 2e cel van achter (de een na laatste) van elke rij krijgt een groene achtergrond.

Opmerking

Pseudo elementen

Pseudo elementen zijn delen van elementen. Pseudo elementen beginnen met twee dubbele punten ::

Vorm

Een pseudo element kan samen met een element, een class of een id een selector vormen:
element::pseudoëlement
of element.class::pseudoëlement
of .class::pseudoëlement
of element#id::pseudoëlement
of #id::pseudoëlement

::first-line

Selecteert de eerste regel van een element.

Voorbeeld
section::first-line {background-color: yellow;}
In dit voorbeeld krijgt de eerste regel van het element section een gele achtergrond.

::first-letter

Selecteert de eerste letter van een element.

Voorbeeld
section::first-letter {color: red;}
In dit voorbeeld wordt de eerste letter van het element section rood..
Nog een voorbeeld
section::first-letter {color: red;}
section::first-line {background-color: yellow;}
Een combinatie van ::first-letter en ::first-line. Hier wordt de eerste letter van het element section rood en de eerste regel geel.