Websites met stijl
Naslag: Pseudo classes en pseudo elementen
Op dit naslagblad
Pseudo elementen
Vorm
::first-line
::first-letter
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:
:link
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
- Zie ook bij :visited.
- De browser kijkt in het geschiedenis-logboek om te zien of een link al eerder is bezocht of niet. In de instellingen van de browser kan worden aangegeven hoe lang de geschiedens bewaard wordt.
Als er helemaal geen geschiedenis wordt bewaard (prive modus) werkt deze selector mogelijk niet.
: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
- Zie ook bij :link.
- De browser kijkt in het geschiedenis-logboek om te zien of een link al eerder is bezocht of niet. In de instellingen van de browser kan worden aangegeven hoe lang de geschiedens bewaard wordt.
Als er helemaal geen geschiedenis wordt bewaard (prive modus) werkt deze selector mogelijk niet.
: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-of-type(1) is hetzelfde als first-of-type
- Meer voorbeelden met nth-of-type zijn te vinden in het naslagblad over tabellen.
: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
:nth-last-of-type(1) is hetzelfde als last-of-type
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; font-size: 200%;}
In dit voorbeeld wordt de eerste letter van het element section rood en dubbel zo groot.
Nog een voorbeeld
section::first-letter {color: red; font-size: 200%;}
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 dubbel zo groot; en de eerste regel krijgt een gele achtergrond.