Class

In het boek hebben we geleerd dat je delen van de pagina uit kunt lichten met behulp van het class-attribuut. Zo wilden de Nanonauten de toptips op hun pagina lekker laten opvallen, zonder ze steeds stuk voor stuk te moeten stijlen in hun HTML-pagina’s. Om dat te doen hebben ze een class-attribuut gemaakt met de naam ‘top-tip’, die ze aan ieder paragraaf-element (<p>) kunnen koppelen.

p.top-tip {
    border:4px solid #0000FF;
    border-radius:10px;
    padding:1em;
    background-color:#C5EBFB;
}

p.top-tip::before {
    color:#111111;
    content:"TOPTIP: ";
    font-weight:bold;
}

Vervolgens voegden ze het stijl-element toe aan het paragraaf-element (<p>) in de HTML-code. Op deze manier:

<p class="top-tip">Alles in dit element heeft nu dezelfde opmaak als omschreven in het class-attribuut 'top-tip'.</p>

Laten we eens kijken wat dit stukje code doet.

In de eerste regel hierboven hebben we toegevoegd:

  • Een dichte, blauwe rand om de paragraaf heen
  • Afgeronde hoeken aan de rand
  • Wat extra ruimte tussen de tekst en de rand
  • Een lichtblauwe achtergrondkleur binnenin de rand

De tweede regel bevat een stukje code die we nog niet eerder hebben gezien, namelijk ‘::before’. Dit is een zogenoemd pseudo-element. Je herkent hem aan de twee dubbele punten direct na elkaar.

Dit pseudo-element vertelt de browser dat hij de inhoud van de regel vóór de inhoud van het <p>-element moet zetten. In dit geval is dat de zwarte, dikgedrukte tekst “TOPTIP:”. Dat betekent dat we deze tekst niet meer toe hoeven te voegen aan de HTML-pagina. Dat gebeurt nu automatisch.

Er zijn ook nog andere pseudo-elementen die je op deze manier kunt gebruiken:

  • ::first-line past de regel alleen toe aan de eerst zin tekst in het <p>-element
  • ::first-letter past de regel alleen toe op de eerste letter in het <p>-element
  • ::after voegt de inhoud van de regel toe achter de inhoud van het <p>-element
  • ::selection past de inhoud van de regel toe aan de tekst die door een gebruiker wordt geselecteerd

Maar wat nou als we meer dan één class willen toepassen op een element? Geen probleem! Je kunt namelijk zoveel classes gebruiken als je zelf wil. Stel je voor dat je twee classes hebt gemaakt:

  • “makeBig”: bevat een css-regel die het gebruikte lettertype groter maakt
  • “allCaps”: bevat een regel die tekst omzet naar hoofdletters

Je kunt beide classes toepassen op een <p>-element door ze toe te voegen aan het class-attribuut, als je ze maar met een spatie van elkaar scheidt. Zoals je hier ziet:

<p class=”makeBig allCaps”>Deze tekst zal nu groter zijn en alleen maar uit hoofdletters bestaan.</p>