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.

[5] maak de opdrachten in repl.it

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

Last updated