Klassen en IDs

Je hebt tot nu toe css regels gezien die op "tag-niveau" werken. Dat wil zeggen je selecteert 1 of meer html tags en koppelt daar css code aan. Er zijn nog veel meer mogelijkheden die je veel preciezere controle geven over waar je css code aan koppelt. Een veelgebruikte manier zijn classes (klassen).

Met classes kun je meerdere elementen selecteren uit je pagina. Zo kun je bijvoorbeeld sommige <p> elementen een andere kleur geven dan andere <p> elementen. Je doet dit door in de HTML-tag te zetten: class="naam"

Dit heet een attribute (eigenschap).

Vervolgens gebruik je in CSS de . (punt) om aan te geven dat je een class selecteert. Zie de onderstaande html en css als voorbeeld:

<body>
  <p class="rood">Deze tekst wordt rood</p>
  <p>Deze tekst blijft zwart</p>
  <p class="rood">Deze tekst wordt rood</p>
  <p>Deze tekst blijft zwart</p>
</body>
p.rood { /* .rood: selecteer alle paragrafen met class="rood"*/
  color: red;
}

Je kunt dus p.rood gebruiken om alle paragrafen met class="rood" te selecteren. Je kunt ook .rood gebruiken om alle elementen met class="rood" te selecteren. Zo kun je dezelfde css code aan verschillende soorten elementen geven met dezelfde class. Bijvoorbeeld:

<body>
  <h1 class="rood">Deze koptekst wordt rood</h1>
  <p>Deze paragraaf blijft zwart</p>
  <h1>Deze koptekst tekst blijft zwart</p>
  <p class="rood">Deze paragraaf wordt rood</p>
</body>
.rood {   
    color: red;  
    text-align: right;
}

Een ander attribuut wat je kunt gebruiken is id. Met een id kun je precies één element uit je pagina selecteren (een id mag dus eigenlijk niet meer dan 1x voorkomen op een pagina). Als toch meerdere elementen hetzelfde id hebben, dan wordt alleen de eerste geselecteerd.

Je doet dit door bijvoorbeeld in de HTML-tag te zetten: id="uitleg"

Vervolgens gebruik je in CSS de # om aan te geven dat je een class selecteert. Verder werkt het hetzelfde als met classes:

<body>
  <p id="uitleg">Hieronder zie je een voorbeeld:</p>
  <p class="rood">Deze tekst wordt rood</p>
  <p>Deze tekst blijft zwart</p>
</body>
p#uitleg { /* #uitleg: selecteer de paragraaf met id="uitleg"*/
  font-weight: bold;
  font-size: 20px;
}

Je kunt nu ook beginnen met een #:

#uitleg { /* #uitleg: selecteer het element met id="uitleg"*/
  font-weight: bold;
}

​Een logische vraag is dus, wanneer gebruik je een id en wanneer een class? Het verschil zit hem in hoe vaak ze op de pagina mogen voorkomen (een id maar 1 keer, een class zo vaak als je wilt). Waarom zou je dan niet altijd class gebruiken (die mag immers ook gewoon maar 1x voor komen)?

Hier zijn minstens 2 redenen voor:

  • Een id is specifieker. Dus als een element zowel een id als een class heeft, dan gaat de css gekoppeld aan het id voor op die gekoppeld aan class

  • Omdat een id uniek is, kun je bij het maken van links (met <a> weet je nog?) linken naar een specifieke plek op een pagina. Hier als voorbeeld is een link naar een specifieke subkop (cultuur) van het wikipedia artikel over appeltaart: klik mij. De # in de link zorgt voor een verwijzing naar de positie van de genoemde id op die pagina

PreviousOpdrachtNextOpdracht

Last updated

Was this helpful?