Om stijlen effectief toe te passen, is het belangrijk om CSS-selectors te begrijpen. Deze bepalen welke HTML-elementen worden geselecteerd voor styling. Laten we de belangrijkste typen selectors verkennen.

Tagselector

Een tagselector richt zich op alle elementen van een bepaald tagtype en past consistente styling toe op de pagina.

Syntax: In de HTML hebben we een p-element:

<p>It was all in my head.</p>

Om stijlen toe te passen in het CSS-bestand, gebruik je de tagnaam (p) als selector:

p {
  property: value;
}

Voer het volgende voorbeeld uit en bekijk het resultaat.

Classeselector

Classeselectoren richten zich op elementen die eenzelfde classnaam delen, waardoor meer nauwkeurige controle mogelijk is.

Syntaxis: Voeg in de HTML een class-attribuut toe met een betekenisvolle classnaam:

<p class="text">This song is another hit.</p>

Verwijs in de CSS naar de classnaam met een punt (.) om de stijlen te definiëren:

.text {
  property: value;
}

Voer het volgende voorbeeld uit en observeer dat alleen elementen met de text-class deze stijlen ontvangen, wat zorgt voor meer gedetailleerde controle over de opmaak.

Alle elementen met het attribuut class="text" worden opgemaakt met rode tekst, een lettergrootte van 24px en een tarwekleurige achtergrond. De classnaam text is gedefinieerd in index.css met behulp van een .-prefix.

Klassecompositie

Meerdere klassen kunnen aan één element worden toegekend voor flexibele opmaak.

Syntaxis: Voeg in de HTML meerdere klassenamen toe aan een element:

<p class="text font">A robot created chemicals.</p>

Definieer in de CSS stijlen voor elke klasse afzonderlijk:

.text {
  property: value;
}

.font {
  property: value;
}

Voer het volgende voorbeeld uit om te zien hoe dit werkt. Elementen met zowel de text als de font klasse ontvangen de opgegeven stijlen.

Het <p>-element met zowel de text als de font klasse ontvangt stijlen van beide selectoren. De text klasse stelt de kleur in op navy en de font klasse stelt de lettergrootte in op 24px.

Id-selector

Id-selectors richten zich op één uniek element. Omdat id's uniek moeten zijn, wordt deze methode zelden gebruikt voor opmaak.

Syntax: Voeg in de HTML een id-attribuut toe aan een element:

<p id="title">Choose from different themes.</p>

Verwijs in de CSS naar de id met een hekje (#) om de stijlen te definiëren:

#title {
  property: value;
}

Voer het volgende voorbeeld uit en observeer het resultaat. Dit voorbeeld past stijlen toe op het unieke element met de title-id.

Het id="title" attribuut identificeert het <p>-element uniek, en de stijlen die met de #title-selector zijn gedefinieerd, zijn alleen van toepassing op dat specifieke element.