Les 6: Elementen selecteren: classes en id's

Met classes kun je meerdere elementen selecteren uit je pagina. Zo kun je bijvoorbeeld sommige <p> elementen een andere kleur geven dan andere <p> elementen. Je doet dit door in de HTML-tag te zetten: class="naam"

Dit heet een attribute (eigenschap).

Vervolgens gebruik je in CSS de . (punt) om aan te geven dat je een class selecteert.

<body>
  <p class="rood">Deze tekst wordt rood</p>
  <p>Deze tekst blijft zwart</p>
  <p class="rood">Deze tekst wordt rood</p>
  <p>Deze tekst blijft zwart</p>
</body>

In style.css:
p.rood { /* .rood: selecteer alle paragrafen met class="rood"*/
  color: red;
}

Je kunt dus p.rood gebruiken om alle paragrafen met class="rood" te selecteren. Je kunt ook .rood gebruiken om alle elementen met class="rood" te selecteren.

.rood { /* .rood: selecteer alle elementen met class="rood"*/
  color: red;
  text-align: right;
}

Met een id kun je één element uit je pagina selecteren. Als meerdere elementen hetzelfde id hebben, dan wordt alleen de eerste geselecteerd.

Je doet dit door in de HTML-tag te zetten: id="uitleg"

Vervolgens gebruik je in CSS de # om aan te geven dat je een class selecteert.

<body>
  <p id="uitleg">Hieronder zie je een voorbeeld:</p>
  <p class="rood">Deze tekst wordt rood</p>
  <p>Deze tekst blijft zwart</p>
</body>

In style.css:
p#uitleg { /* #uitleg: selecteer de paragraaf met id="uitleg"*/
  font-weight: bold;
  font-size: 20px;
}

Je kunt nu ook beginnen met een #:

#uitleg { /* #uitleg: selecteer het element met id="uitleg"*/
  font-weight: bold;
}

Opdrachten

[1] Maak een nieuwe html pagina en noem deze vragen.html. Neem de volgende code erin over:

<body>
  <h1>Provincievragen</h1>
  <p>
    De uitleg: Lees de vraag en bedenk wat het antwoord is.
  </p>
  <h2>vraag 1</h2>
  <p>Welke Nederlandse provincie bestaat uit slechts zes gemeenten? </p>
  <p>Flevoland</p>

  <h2>vraag 2</h2>
  <p>Wat is naar oppervlakte gemeten de kleinste provincie van Nederland? </p>
  <p>Utrecht</p>
</body>

[2] Voeg aan alle vragen (uit vragen.html) de class “vraag” toe en aan alle antwoorden de class “antwoord”. Voorbeeld:

  <p class="vraag">
    Welke Nederlandse provincie bestaat uit slechts zes gemeenten ?
  </p>  <p class="antwoord">Flevoland</p>

[3] Selecteer de twee classes in je css.

Geef de vragen een achtergrondkleur en een letterkleur.
Geef de antwoorden dezelfde achtergrondkleur en een letterkleur!
Je kunt nu de antwoorden niet lezen tenzij je ze met de muis selecteert.

[4] De eerste paragraaf geeft uitleg over de vragen. Voeg daar een ID aan toe en geef het een mooie stijl met behulp van CSS.

PreviousLes 5: Margin, padding en development tools NextLes 7: Pseudo-classes, (hyper)links en span-element

Last updated 5 years ago

Was this helpful?

<body> <p class="rood">Deze tekst wordt rood</p> <p>Deze tekst blijft zwart</p> <p class="rood">Deze tekst wordt rood</p> <p>Deze tekst blijft zwart</p> </body> In style.css: p.rood { /* .rood: selecteer alle paragrafen met class="rood"*/ color: red; }

<body> <p id="uitleg">Hieronder zie je een voorbeeld:</p> <p class="rood">Deze tekst wordt rood</p> <p>Deze tekst blijft zwart</p> </body> In style.css: p#uitleg { /* #uitleg: selecteer de paragraaf met id="uitleg"*/ font-weight: bold; font-size: 20px; }

<body> <h1>Provincievragen</h1> <p> De uitleg: Lees de vraag en bedenk wat het antwoord is. </p> <h2>vraag 1</h2> <p>Welke Nederlandse provincie bestaat uit slechts zes gemeenten? </p> <p>Flevoland</p> <h2>vraag 2</h2> <p>Wat is naar oppervlakte gemeten de kleinste provincie van Nederland? </p> <p>Utrecht</p> </body>