Klasse vs ID
Cascading Style Sheets (CSS) is een taal die het uiterlijk en de opmaak beschrijft van een document dat is geschreven met behulp van een opmaaktaal. CSS wordt veel gebruikt om webpagina's op te maken die in HTML zijn geschreven. Met CSS kunt u uw eigen stijlkiezers specificeren naast het toepassen van stijlen voor HTML-elementen. Dit wordt gedaan met behulp van de ID- en klassekiezers. Bij het specificeren van een stijl voor een enkel uniek element, wordt de ID-selector gebruikt. Bij het specificeren van een stijl voor een groep elementen wordt de klassenkiezer gebruikt.
Wat is een klas?
In CSS kan de klassekiezer worden gebruikt om uw eigen stijl toe te passen op een groep elementen. De Klasse-selector wordt gebruikt om een specifieke stijl toe te passen op een set elementen met dezelfde klasse. In CSS wordt een klassenkiezer geïdentificeerd door een punt (.). Hieronder volgt een voorbeeld van een klassenkiezer gedefinieerd in CSS.
.mijn_klasse {
kleur: blauw;
font-weight: vet;
}
HTML kan verwijzen naar de klasse die is gedefinieerd in CSS door de attribuutklasse te gebruiken zoals hieronder weergegeven.
Dit is mijn opmaak
Dit is weer mijn opmaak
Zoals hierboven getoond, kan dezelfde klasse voor meerdere elementen worden gebruikt en kan een enkel element meerdere klassen gebruiken. Wanneer meerdere klassen in hetzelfde element worden gebruikt, worden de klassen ingevoegd in het class-attribuut, begrensd door een spatie, zoals hieronder weergegeven.
Dit is mijn opmaak met twee klassen
Wat is een ID?
In CSS kan de ID-selector worden gebruikt om uw eigen stijl toe te passen op een enkel uniek element. In CSS wordt een ID-selector geïdentificeerd door een hekje (). Hieronder volgt een voorbeeld van een ID-selector gedefinieerd in CSS.
mijn_ID {
kleur: rood;
text-align:right;
}
HTML kan verwijzen naar de ID-selector gedefinieerd in CSS door het attribuut-ID te gebruiken zoals hieronder weergegeven.
Dit is mijn opmaak van een ID-selector
ID's zijn uniek. Daarom kan elk element slechts één enkele ID hebben en kan elke pagina slechts één enkel element met die specifieke ID hebben. ID's hebben een belangrijk kenmerk dat met een browser kan worden gebruikt. Als de pagina-URL een hash-waarde bevat (bijv. https://myweb.commy_id), zal de browser proberen het element met de ID "my_id" automatisch te lokaliseren en door de webpagina scrollen om dat element weer te geven. Dit is een van de redenen waarom de pagina een enkel element met die specifieke ID zou moeten hebben, zodat de browser dat element kan vinden.
Wat is het verschil tussen Class en ID?
Hoewel zowel de Klasse-kiezer als de ID-kiezer kunnen worden gebruikt om uw eigen stijl toe te passen op elementen in een webpagina, hebben ze enkele belangrijke verschillen. Klassekiezer kan worden gebruikt om uw eigen stijl toe te passen op een groep elementen, terwijl de ID-kiezer wordt gebruikt om een stijl toe te passen op een enkel, uniek element. Bij het gebruik van ID's kan elk element slechts één ID hebben en kan elke pagina slechts één enkel element met die specifieke ID hebben, maar Class kan voor meerdere elementen worden gebruikt en een enkel element kan meerdere Classes gebruiken. Verder kan ID worden gebruikt om automatisch door een pagina te scrollen om het element met die ID weer te geven, maar dit is niet mogelijk met de klassenkiezer.
