CSS selectors, de familie
In het eerste artikel over CSS selectors heb ik je vertelt dat CSS is opgebouwd uit verschillende onderdelen. In dit tweede artikel wil ik het hebben over de familieboom die je kunt gebruiken om de verschillende namen te kunnen plaatsen.
We gebruiken hiervoor een simpele html opzet.
Ancestor
Ancestor – (stamvader): Een HTML tag die geplaatst is rondom een andere tag is de stamvader van die tag. In bovenstaand voorbeeld is de tag <html>, de stamvader van alle andere genoemde tags. De tag <body> is de stamvader van <h1>, <p> en <em>.
Descendent
Descendent – (afstammeling): Een tag in een tag is een afstammeling. In de afbeelding is <body> de afstammeling van <html>.
Tegelijkertijd is <p> een afstammeling van en <body> en <html>.
Parent
Parent – (ouder (in de vorm van vader of moeder)): Een parent is de meest directe stamvader (ancestor). In ons voorbeeld is de <html> tag dus Parent van <body> en <head>, maar niet van alle andere tags.
De <p> tag is de parent van de <em> tag.
Child
Child – (kind): Logischerwijs is dit de benaming voor de tag die direct gerelateerd is aan de voorgaande tag. <h1> en <p> zijn children van <body>. <em> is geen kind van <body> omdat deze onder de <p> valt.
Sibling
Sibling – (broer/zus): Tenslotte heb je de sibling. Deze kun je zien als broer of zus van een andere tag. In ons voorbeeld zijn <h1> en <p> siblings. Evenals <body> en <head>.
Pseudo classes voor links
De meest bekende en gebruikte pseudo classes zijn die voor links. Er zijn vier varianten om een link vorm te geven.
a:link – hiermee wordt de link geselecteerd die nog niet bezocht is en de muis gaat niet over de link heen.
a:visited – Dit is een link waar al eerder een bezoek aan is gebracht. Je kunt een bezochte link dus al informatie meegeven.
a:hover – Hiermee kun je de link voorzien van een mouseover effect. Bijvoorbeeld door een tabblad te voorzien van een andere kleur als je er met de muis over gaat.
Dit effect mag je overigens ook gebruiken voor andere elementen dan een link. Je kunt bijvoorbeeld een paragraaf laten oplichten, zoals ik hieronder laat zien.
Dit is een testparagraaf, ga er eens over met je muis…
Dit is gedaan met de volgende stijl:
p.over {border: 1px solid black;}
p.over:hover {background-color: #333; color: #FFF;}
a:active – Op het moment dat een bezoeker daadwerkelijk klikt kun je ook nog activiteit laten plaats vinden. Bijvoorbeeld het veranderen van kleur.
:first-letter en :first-line
Vervolgens zijn er de twee pseudo elementen :first-letter en :first-line. Je kunt al wel raden waar deze voor bedoeld zijn. Wanneer je de eerste letter van een paragraaf anders wilt vormgeven dan normaal, gebruik dan :first-letter. Wil je de hele eerste regel bijvoorbeeld vetgedrukt hebben in een paragraaf, dan gebruik je :first-line. Dit pas je op dezelfde manier toe als het voorbeeld hierboven met de :hover functie.
In het volgende artikel ga ik het hebben over een volgende rij met pseudo selectors zoals :before en :after.
Dit is het tweede deel van vier artikelen over CSS selectors
Artikel 1 – CSS selectors voor beginners
Artikel 2 – CSS selectors, de familie
Artikel 3 – Pseudo selectors :before, :after, :first-child en :focus.
artikel 4 – komt nog
2 reacties
[…] 1 – CSS selectors voor beginners Artikel 2 – CSS selectors, de familie Artikel 3 – Pseudo selectors :before, :after, :first-child en :focus. artikel 4 – komt […]
[…] Cascading betekent zoiets als waterval. CSS maakt gebruik van overerving. Dit mag je nu even vergeten, maar als je al een klein beetje weet van CSS en je wilt precies weten hoe het zit met Cascading, lees dan mijn artikel van jaren geleden eens: CSS selectors. […]