CSS Selectors

Je hebt al gezien dat CSS het volgende format heeft: selector {eigenschap: waarde}

Met de selector selecteer je op welke tag(s) de stijl van toepassing is.

Veelvoorkomende CSS selectoren

• Een element met een ID=”uniekenaam” : #uniekenaam {stijl: waarde)
• Alle elementen met attribuut class=”klassenaam” : .klassenaam {stijl: waarde}
• Een link waar je muis boven zweeft: a:hover {stijl: waarde}

Meer complexe css selectoren vind je op deze referentie-pagina van W3schools: CSS Selector Reference ↗

Een voorbeeld van een complexe selectie:

Mocht je alleen bepaalde elementen willen kiezen, dan kun je een patroon opgeven waaraan voldaan moet worden.
Bijvoorbeeld: div.nav li ul.submenu a {stijl: waarde}

Betekent: selecteer de anchor die in een unordered list staat met class=”submenu”, welke weer onderdeel is van een andere lijst, welke weer een kind is van een div met class=”nav”.

m.a.w.:

Complexe (of slimme) CSS selectoren stellen je dus in staat om vrijwel elke selectie van elementen te maken die je maar wil, en daar een bepaalde stijl op toe te passen.

De HTML Document Object Model (DOM)

Wat je in het bovenstaande voorbeeld ook ziet, is dat een html-document hierarchisch is, en je als het ware omhoog en omlaag langs de elementen van de boom (met vertakkingen) kunt lopen en zo bepaalde takken kunt selecteren. Je browser doet precies hetzelfde en houdt na interpretatie van de HTML-code een DOM in zijn geheugen: een Document Object Model ↗, ofwel een boom-achtige structuur dat alle objecten/elementen van je HTML-pagina bevat. Met Javascript en CSS kun je vervolgens dit model live manipuleren, met een responsieve & dynamische website tot gevolg (een website die op jou reageert). Hierdoor kan het ook dat als je in Google Chrome “inspect” kiest en je de css aanpast, je wijzigingen live in de browser getoond worden.