Mi-Soft.nl



avatar Het verschil tussen een class en een id 20-08-2014
In de tutorial van vandaag kijken wat het verschil is tussen een class en een id.

Notatie

Een css class begint met een . dan krijgen we dus .tutorial1 als klasse bijv.
Een id begint met een # dus dan krijgen we #tutorial1

Belangrijk verschil 1: Aantal dezelfde types op een pagina

Een van de belangrijkste verschillen tussen een class en een id is dat elke pagina maar één id kan hebben van hetzelfde type, terwijl er wel meerdere classen van hetzelfde type aanwezig mogen zijn.
Dit betekent dus dat u voor herhalende objecten op een pagina, zoals codeblokken, een class gebruikt.
Heeft u echter op de pagina maar 1 element van het type nodig, bijvoorbeeld een header of een footer (waar er altijd maar 1'tje van is op een pagina) kunt u beter een id gebruiken.

Mocht u toch (per ongelijk) 2 maal hetzelfde id op een pagina gebruiken kan dit de pagina "breken". Vaak zijn browsers slim genoeg om dit zelf op te lossen zodat de pagina er toch hetzelfde uit ziet. Echter is dit niet de bedoeling en kan dit per browser verschillende resultaten geven. Dit is dus slecht om in uw website te gebruiken.

Belangrijk verschil 2: Aantal dezelfde types koppelen aan een element.

Een ander belangrijk verschil is dat een element (een div bijvoorbeeld) maar één id kan hebben, maar kan als u wilt 2 of meer classes hebben.
We kunnen dus verschillende classes maken en één of meerdere classes koppelen aan een div. We kunnen niet meer dan 1 id koppelen aan een div.
Dit gaan we duidelijk maken aan de hand van een code voorbeeld.
In het eerste voorbeeld geven we de div 2 classes mee: tutorial1 & redbg.

<div class = "tutorial1 redbg">
	<p>Dit is een testclass, in deze tekst class vindt u:</p>
	<ul>
		<li>Een paragraaf</li>
		<li>Een lijst</li>
		<li>Een foto</li>
	</ul>
	<img src = "foto.png" alt = "tutorialfoto" height = "75" width = "75" />
</div>

Met de bijbehorende CSS code:

.tutorial1{
	background: #3D3D3D;
	width: 600px;
	color: #fff;
	margin-left: auto;
	margin-right: auto;
}
.redbg{
	background: red;
}

Geeft het volgende resultaat:

image

Hier ziet u dat alles netjes word gedaan zoals beschreven staat in de css. De breedte is 600px, tekst kleur wit & de achtergrond is rood. Wanneer we in plaats van 2 classes 2 id's gaan gebruiken ziet het resultaat er heel anders uit:

<div id = "tutorial1 redbg">
	<p>Dit is een testclass, in deze tekst class vindt u:</p>
	<ul>
		<li>Een paragraaf</li>
		<li>Een lijst</li>
		<li>Een foto</li>
	</ul>
	<img src = "foto.png" alt = "tutorialfoto" height = "75" width = "75" />
</div>

Met de bijbehorende CSS code:

	#tutorial1{
		background: #3D3D3D;
		width: 600px;
		color: #fff;
		margin-left: auto;
		margin-right: auto;
	}
	#redbg{
		background: red;
	}

Geeft het volgende resultaat:

image

U ziet hier dat de hele div gebroken is. Er word van zowel de id "tutorial1" en "redbg" geen css meer toegepast.

Dit was het weer voor deze tutorial, ik hoop dat u nu het verschil tussen een class en id begrijpt!

De code

Klik hier om de code te downloaden.

Gerelateerde artikelen

Over de auteur:
Rick's headshot
Rick van Lieshout
Rick van Lieshout is de eigenaar en administrator van Mi-Soft.nl
Ook is hij een manusje van alles en kan daarom in veel categorieen een steentje bijdragen.
U kunt meer over Rick te weten komen op zijn portfolio.
Rick@Mi-Soft.nl | Portfolio | Facebook | Twitter | Google+ | Youtube | Flickr | LinkedIn