Class en ID selectors

CSS class en id selectors beschrijven beiden de opmaak van een specifiek element in een document. Deze selectors zijn eigenlijk gewone attribuut selectors. Het verschil tussen de twee selectors is, dat het class attribuut onbeperkt aantal keren met een bepaalde naam in een document mag worden opgenomen, terwijl het id attribuut slechts één keer met een bepaalde waarde in een document mag staan.

Het verbinden van de stijl met een element gebeurt bij gebruik van het class attribuut via een class-naam en in het geval van het id attribuut via een id-waarde.

<Element class="class-naam">

<Element id="id-waarde">

Opbouw voor stijlregels voor een class-naam en een id-waarde ziet er als volgt uit:

.class-naam { stijldeclaratie }

#id-waarde  { stijldeclaratie }

ID met een bepaalde id-waarde kan maar één keer worden gebruikt en class met een bepaalde class-naam kan onbeperkt aantal keren worden gebruikt in een document.

CLASS-Selector

De class-selector kan worden gebruikt om elk HTML-element te selecteren dat een class-attribuut heeft. Alle elementen met die klasse worden opgemaakt volgens de gedefinieerde regel. De class-selector wordt gedefinieerd met een punt(.) gevolgd door de class-waarde. Het class attribuut mag onbeperkt aantal keren met een bepaalde class-naam in een document worden opgenomen.

De class-selector heeft als basis een punt gevolgd door een class-naam.

.class-naam { stijldeclaratie }

Voorbeeld:

.rood {
  color: red;
}

Uitproberen

Element.class-naam { stijldeclaratie }

Voorbeeld:

p.rood {
  color: red;
}

Uitproberen

.class-naam1 .class-naam2 { stijldeclaratie }

Voorbeeld:

.rood {
  color: red;
}  
.vetgedrukt {
  font-weight: bold;
}

Uitproberen

Element.class-naam1 .class-naam2 { stijldeclaratie }

Voorbeeld:

p.rood {
  color: red;
}  
p.achtergrond {
  background-color: yellow;
}

Uitproberen

Onthoud dat een class-naam niet mag beginnen met een cijfer en houd er rekening mee dat de class-naam hoofdlettergevoelig is. Dat wil zeggen dat het uitmaakt of de class-naam in hoofdletters of in kleine letters wordt geschreven.

ID-Selector

De ID-selector wordt gebruikt om stijlregels te definiëren voor een enkel of uniek element. Om een element met een specifieke ID te selecteren zet je er een hekje(#) voor, gevolgd door een id-waarde. Het ID attribuut mag slechts één keer met een bepaalde id-waarde in een document worden opgenomen.

Opbouw voor stijlregels voor een id-waarde ziet er als volgt uit:

#id-waarde { stijldeclaratie }

Element#id-waarde { stijldeclaratie }

In het volgende voorbeeld maken we gebruik van een ID-selector met de waarde "succes". De stijlblok hiervan is in de head van het document opgenomen.

Voorbeeld:

#succes {
  color: green;
  background-color: yellow;
}

Uitproberen

Nu gaan we het element p voor zetten, dan ziet het er als volgt uit:

Voorbeeld:

p#succes {
  color: green;
  background-color: yellow;
}

Uitproberen

Onthoud dat een id-waarde niet mag beginnen met een cijfer en houd er rekening mee dat de id-waarde hoofdlettergevoelig is. Dat wil zeggen dat het uitmaakt of de id-waarde in hoofdletters of in kleine letters wordt geschreven.

Vorige Volgende

	Ad blocker gedetecteerd!
	Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.