Selectors

drawing

De Selector selecteert welke HTML elementen worden aangepast door CSS. Een CSS selector kan bijvoorbeeld alle <p> elementen selecteren, zodat CSS de tekstkleur daarvan kan aanpassen.
Een stijlregel wordt dus toegepast op alle elementen die overeenkomen met de selector. CSS heeft verschillende soorten selectors.

Selectors overzicht

selector	voorbeeld	uitleg
De element selector	`p`	Selecteer alle <p> elementen. De element selector is de simpelste: Je gebruikt de tagnaam van het HTML element als selector, en alle HTML elementen met die tagnaam zullen vanaf dan deze stijlregels volgen.
De ALL selector	`*`	Selecteer alle elementen. De * selector wordt gebruikt om stijlregels toe te passen op alle elementen. Wil je dat alle elementen op je website een bepaald lettertype gebruiken, kan je hiervoor de * selector gebruiken.
De class selector	`.intro`	Selecteer alle elementen met class="intro". Wanneer elementen zijn gemarkeerd met het class-attribute kan je deze elementen ook een eigen stijl geven. Je doet dit door middel van een punt, gevolgd door de naam die je in het class-attribute hebt geschreven.
De id selector	`#firstname`	Selecteer het element met id="firstname". Wanneer elementen zijn gemarkeerd met het ID-attribute kan je deze elementen een eigen stijl geven. Je doet dit door middel van een hekje, gevolgd door de naam die je in het ID-attribute hebt geschreven.
Selectors combineren	`div, p`	Selecteer alle <div> elementen en alle <p> elementen.
Geneste elementen selector	`div p`	Selecteer alle <p> elementen die zich bevinden in <div> elementen.
Parent-child selector	`div > p`	Selecteer alle <p> elementen waarvan de parent een <div> element is.
After selector	`div + p`	Selecteer alle <p> elementen die direct na <div> elementen staan.
Before selector	`p ~ ul`	Selecteer elk <ul> element dat wordt voorafgegaan door een <p> element.

Voorrang van selectors

Opbouw van stijlregels

Wanneer verschillende selectors van toepassing zijn, gaat CSS proberen al deze selectors met elkaar te combineren.

Een div element van de klasse “content” en een ID “koptekst” kan reageren op 3 selectors:

div
.content
#koptekst

Bijvoorbeeld:

div {
	background-color: red;
}
.content {
	color: green;
}
#koptekst {
	font-family: verdana;
}

Wanneer, zoals in bovenstaand voorbeeld, alle 3 de selectors stijlregels krijgen, wordt voor het element <div class="content" id="koptekst"> een combinatie gemaakt van deze 3 stijlregels:

	background-color: red;
	color: green;
	font-family: verdana;

Conflicterende stijlregels

Stijlregels kunnen soms conflicteren: Wanneer je een div element van de klasse “content” hebt voorzien en een ID “koptekst” hebt gegeven, kan het wel eens gebeuren dat verschillende selectors dezelfde stijlregels proberen toe te passen:

div {
	Background-color: red;
}
.content {
	Background-color: green;
}
#koptekst {
	Background-color: blue;
}

Het is daarom belangrijk om te weten welke selector voorrang krijgt.De algemene regel is: hoe specifieker de selector, hoe meer voorrang.

De selectors die we tot nu toe bekeken hebben hebben hun voorrang als volgt:

De ID selector overschrijft alle andere stijlregels.
De Class selector overschrijft alle stijlregels, behalve die van de ID selector.
De element selector volgt na de Class selector.
De * selector wordt enkel aan het einde toegevoegd, als alle andere stijlregels zijn toegepast.

Wanneer twee selectors even specifiek zijn geldt de onderste stijlregel in de css code.

In volgend voorbeeld zal elke <div> een groene achtergrond kleur krijgen.

div {
	Background-color: red;
}
div {
	Background-color: green;
}

State Selectors

In andere hoofdstukken werd bekeken hoe CSS de standaard opmaak van een element kan veranderen.

Gebruikers van een website kunnen de opmaak van een element echter aanpassen:

Wanneer een gebruiker met zijn muis over een knop gaat, verandert de knop van kleur
Wanneer een gebruiker klikt op een tekstveld, verandert de opmaak zodat duidelijk wordt dat het tekstveld is geselecteerd.

De gebruiker past door zijn acties elementen aan, en als webdesigner wil je dat je opmaak deze aanpassingen weergeeft.

Dit gebeurt aan de hand van CSS state selectors. Een state gaat over een specifieke momentopname van een element.

Enkele voorbeelden:

De :hover state: dit geeft aan dat een gebruiker met zijn muis boven op een element hangt.
De :focus state: dit geeft aan dat een gebruiker een element heeft geselecteerd.

State selectors gebruiken

State selectors zijn een uitbreiding op de CSS selectors die je al kent. Wanneer je een aan de hand van een selector een element hebt opgemaakt, kan je aan die selector een State Selector toevoegen met een dubbelpunt.

drawing

Andere State Selectors

Sommige state selectors dienen om specifieke elementen aan te duiden. Enkele voorbeelden:

De :first-child state: Dit zal het eerste element opmaken dat zich in de selector bevindt.
De :empty state: Dit zal alle elementen van de selector opmaken die geen enkel ander element bevatten.

State selector voorbeelden

Hyperlinks

Hyperlinks hebben 4 State Selectors die je bijna altijd moet definieren:

De :link state: Een hyperlink waar de gebruiker nog niet op heeft geklikt.
De :visited state: Een hyperlink waar de gebruiker al wel op heeft geklikt.
De :hover state: Een hyperlink waar de gebruiker met zijn muis over staat.
De :active state: Een hyperlink die verwijst naar de huidige pagina.

/* link waar nog niet op geklikt is */
a:link {
    color: #FF0000;
}

/* link waar al wel op geklikt is */
a:visited {
    color: #00FF00;
}

/* link waar de muis over staat */
a:hover {
    color: #FF00FF;
}

/* link die verwijst naar de huidige pagina */
a:active {
    color: #0000FF;
}

Belangrijk:
a:hover MOET komen na a:link en a:visited om te werken! (als je a:link en/of a:visited hebt gedefinieerd)
a:active MOET komen na a:hover om te werken! (als je a:hover hebt gedefinieerd)