HTML class-attribuut

Definitie en gebruik

class Het attribuut definieert de klassenaam van het element (classname).

class Het attribuut wordt voornamelijk gebruikt om naar klassen in een stijlsheet te verwijzen. Het kan echter ook worden gebruikt om HTML-elementen met een specifieke klasse te wijzigen via JavaScript (HTML DOM).

Zie ook:

HTML handleiding:HTML attributes

CSS handleiding:CSS syntax

CSS referentiehandleiding:CSS .class selector

HTML DOM referentiehandleiding:HTML DOM getElementsByClassName() methode

HTML DOM referentiehandleiding:HTML DOM className eigenschap

HTML DOM referentiehandleiding:HTML DOM classList eigenschap

HTML DOM referentiehandleiding:HTML DOM Style object

Voorbeeld

Voorbeeld 1

Gebruik de class-eigenschap in een HTML-document:

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">Hoofdstuk 1</h1>
<p>Een paragraaf.</p>
<p class="important">Let op, dit is een belangrijke paragraaf. :)</p>
</body>
</html>

Try it yourself

Meer voorbeelden zijn beschikbaar onderaan de pagina.

Syntax

<element class="classname">

Eigenschapswaarde

Waarde Beschrijving
classname

Specificeer een of meerdere klassen voor een element.

Als je meerdere klassen wilt specificeren, kun je de klassenamen scheiden met een spatie.

Dit staat toe om meerdere CSS-klassen te combineren voor een HTML-element.

Bijvoorbeeld: <span class="left important">

Naamgeving:

  • Moet beginnen met een letter A-Z of a-z.
  • Kan worden gevolgd door: letters (A-Za-z), cijfers (0-9), koppeltekens ("-") en onderstrepingstekens ("_").

Meer voorbeelden

Voorbeeld 2

Voeg meerdere klassen toe aan een HTML-element:

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}
.important {
  background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">Titel 1</h1>
<p>Een paragraaf.</p>
</body>
</html>

Try it yourself

Voorbeeld 3

Gebruik JavaScript om een gele achtergrondkleur toe te voegen aan het eerste element met class="example" (index 0).

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

Try it yourself

Example 4

Use JavaScript to add the "mystyle" class to the element with id "myDIV":

document.getElementById("myDIV").classList.add("mystyle");

Try it yourself

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support