Elementen op Een Eenvoudige Manier Selecteren

Om stijlen toe te passen, moet je aan CSS aangeven welke HTML-elementen je wilt targeten. Dit gebeurt met behulp van selectors. In dit hoofdstuk behandelen we de drie belangrijkste selectors: de tagselector, de classselector en de id-selector.

Tagselector

Een tagselector target alle elementen van een specifiek HTML-tag.
Voorbeeld HTML:

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

Voorbeeld CSS:

p {
  color: purple;
  font-size: 36px;
  background-color: pink;
}

Deze regel is van toepassing op elk <p>-element op de pagina.

Gebruik tagselectors wanneer je een consistente opmaak wilt voor alle elementen van dat type.

Classeselector

Een classeselector richt zich op elementen die dezelfde classnaam delen.
HTML:

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

In de CSS verwijs je naar de classnaam met een punt (.) om de stijlen te definiëren:

.text {
  color: red;
  font-size: 24px;
  background-color: wheat;
}

Alleen elementen met class="text" krijgen deze stijlen.

Classeselectors zijn de meest gebruikte selectortype in echte projecten omdat ze flexibele en herbruikbare styling mogelijk maken.

Meerdere classes

Een element kan meer dan één class hebben.
HTML:

<p class="text font">We test multiple class names</p>

CSS:

.text {
  color: navy;
}

.font {
  font-size: 24px;
}

Als een element beide classes heeft, ontvangt het stijlen van beide selectors.

Dit maakt class-gebaseerde styling krachtig.

Het <p>-element met zowel de text- als de font-klassen 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

Een ID-selector richt zich op één uniek element.

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 {
  font-weight: 500;
  font-size: 20px;
}

ID's moeten uniek zijn binnen een pagina.

Hoewel ID's gebruikt kunnen worden voor styling, worden klassen meestal geprefereerd vanwege consistentie en herbruikbaarheid.