HTML en CSS leren: Pseudoklassen

Pseudoklassen

Op de site van Doek Open gebeurt niets als je met de muis over een knop gaat. "Een theater zonder belichting," zucht Fons. En de tabel met speeldata leest als één grijze muur.

Een toestand

Een pseudoklasse kiest een element in een bepaalde toestand. Ze begint met een dubbele punt, vlak achter de selector.

:hover geldt zolang de muis op het element staat. :focus geldt als het element gekozen is met het toetsenbord: wie met de Tab-toets door de links gaat, ziet waar hij staat.

Op een computer kan je het meteen proberen: ga met de muis over een ticketknop. Op een gsm bestaat hover nauwelijks, dus zet nooit iets belangrijks alleen in een hover.

style.css

1.knop:hover {2  background-color: #b8860b;3}

toneel.example

Een plaats

Andere pseudoklassen kiezen een element op zijn plaats tussen zijn broers en zussen. li:first-child is de eerste <li> van zijn lijst, li:last-child de laatste.

:nth-child(3) is de derde. Met :nth-child(even) kies je de even, met :nth-child(odd) de oneven: 1, 3, 5.

Zo maak je een tabel met om de andere rij een kleurtje, zonder een class op elke rij.

style.css

1tr:nth-child(even) {2  background-color: #f6ead8;3}

toneel.example

Probeer het zelf

Geef elke knop (.knop) de achtergrond #b8860b als de muis erop staat, en ook als hij met de Tab-toets gekozen is. In rust blijft hij zoals hij is.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>Toneelkring Doek Open</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1>Doek Open</h1>11      <p class="slogan">Toneelkring uit Geel, sinds 1952</p>12      <nav id="menu">13        <ul>14          <li><a href="index.html">Home</a></li>15          <li class="actief"><a href="affiche.html">Affiche</a></li>16          <li><a href="lid-worden.html">Lid worden</a></li>17          <li><a href="contact.html">Contact</a></li>18        </ul>19      </nav>20    </header>21    <main>22      <section id="affiche">23        <h2>Op de affiche</h2>24        <article class="stuk">25          <h3>De Vrek</h3>26          <p class="datum">14 tot 16 maart</p>27          <p>Een klucht naar <a href="https://nl.wikipedia.org/wiki/Molière">Molière</a>, over een man die zijn geld liever ziet dan zijn kinderen.</p>28          <blockquote>29            <p>Ik heb in jaren niet zo gelachen.</p>30          </blockquote>31          <a class="knop" href="https://tickets.doekopen.example/vrek">Tickets</a>32        </article>33        <article class="stuk">34          <h3>Moord in de Pastorij</h3>35          <p class="datum">9 tot 11 mei</p>36          <p>Iedereen heeft een alibi, behalve de kat.</p>37          <a class="knop" href="https://tickets.doekopen.example/pastorij">Tickets</a>38        </article>39      </section>40      <section id="speeldata">41        <h2>Speeldata</h2>42        <table>43          <tr>44            <th>Dag</th>45            <th>Uur</th>46          </tr>47          <tr>48            <td>Vrijdag 14 maart</td>49            <td>20 uur</td>50          </tr>51          <tr>52            <td>Zaterdag 15 maart</td>53            <td>20 uur</td>54          </tr>55          <tr>56            <td>Zondag 16 maart</td>57            <td>15 uur</td>58          </tr>59        </table>60      </section>61      <section id="downloads">62        <h2>Om te lezen</h2>63        <ul>64          <li><a href="programma.pdf">Het programmaboekje</a></li>65          <li><a href="reglement.pdf">Het reglement</a></li>66          <li><a href="https://nl.wikipedia.org/wiki/De_vrek">Over De Vrek</a></li>67          <li><a href="mailto:kassa@doekopen.example">Mail de kassa</a></li>68        </ul>69      </section>70    </main>71    <footer>72      <p>Zaal De Kroon, Kerkstraat 21, Geel</p>73    </footer>74  </body>75</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fbf6ee;5  color: #2b1d1d;6}7header {8  padding: 20px 16px 14px;9  background: #5c1515;10  color: #f5e6c8;11}12header h1 {13  margin: 0;14}15.slogan {16  margin: 4px 0 12px;17}18#menu ul {19  display: flex;20  flex-wrap: wrap;21  gap: 4px 18px;22  margin: 0;23  padding: 0;24  list-style: none;25}26#menu a {27  color: #f5e6c8;28}29main {30  padding: 8px 16px 24px;31}32h2 {33  color: #7a1c1c;34}35a {36  color: #7a1c1c;37}38.stuk {39  margin: 12px 0;40  padding: 12px 16px;41  border-radius: 16px;42  background: #ffffff;43}44.stuk h3 {45  margin: 0 0 4px;46}47blockquote {48  margin: 8px 0;49  padding-left: 12px;50  border-left: 3px solid #d4a017;51}52.knop {53  display: inline-block;54  padding: 6px 16px;55  border-radius: 999px;56  background-color: #7a1c1c;57  color: #ffffff;58  text-decoration: none;59}60table {61  border-collapse: collapse;62}63th,64td {65  padding: 6px 10px;66  border: 1px solid #e6d3c3;67  text-align: left;68}69footer {70  padding: 12px 16px;71  background: #5c1515;72  color: #f5e6c8;73}

toneel.example

Klaar voor meer?

De volledige les heeft 6 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Een toestand

Een pseudoklasse kiest een element in een bepaalde toestand. Ze begint met een dubbele punt, vlak achter de selector.

:hover geldt zolang de muis op het element staat. :focus geldt als het element gekozen is met het toetsenbord: wie met de Tab-toets door de links gaat, ziet waar hij staat.

Op een computer kan je het meteen proberen: ga met de muis over een ticketknop. Op een gsm bestaat hover nauwelijks, dus zet nooit iets belangrijks alleen in een hover.

style.css

1.knop:hover {2  background-color: #b8860b;3}

toneel.example

Een plaats

Andere pseudoklassen kiezen een element op zijn plaats tussen zijn broers en zussen. li:first-child is de eerste <li> van zijn lijst, li:last-child de laatste.

:nth-child(3) is de derde. Met :nth-child(even) kies je de even, met :nth-child(odd) de oneven: 1, 3, 5.

Zo maak je een tabel met om de andere rij een kleurtje, zonder een class op elke rij.

style.css

1tr:nth-child(even) {2  background-color: #f6ead8;3}

toneel.example

Probeer het zelf

Geef elke knop (.knop) de achtergrond #b8860b als de muis erop staat, en ook als hij met de Tab-toets gekozen is. In rust blijft hij zoals hij is.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>Toneelkring Doek Open</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1>Doek Open</h1>11      <p class="slogan">Toneelkring uit Geel, sinds 1952</p>12      <nav id="menu">13        <ul>14          <li><a href="index.html">Home</a></li>15          <li class="actief"><a href="affiche.html">Affiche</a></li>16          <li><a href="lid-worden.html">Lid worden</a></li>17          <li><a href="contact.html">Contact</a></li>18        </ul>19      </nav>20    </header>21    <main>22      <section id="affiche">23        <h2>Op de affiche</h2>24        <article class="stuk">25          <h3>De Vrek</h3>26          <p class="datum">14 tot 16 maart</p>27          <p>Een klucht naar <a href="https://nl.wikipedia.org/wiki/Molière">Molière</a>, over een man die zijn geld liever ziet dan zijn kinderen.</p>28          <blockquote>29            <p>Ik heb in jaren niet zo gelachen.</p>30          </blockquote>31          <a class="knop" href="https://tickets.doekopen.example/vrek">Tickets</a>32        </article>33        <article class="stuk">34          <h3>Moord in de Pastorij</h3>35          <p class="datum">9 tot 11 mei</p>36          <p>Iedereen heeft een alibi, behalve de kat.</p>37          <a class="knop" href="https://tickets.doekopen.example/pastorij">Tickets</a>38        </article>39      </section>40      <section id="speeldata">41        <h2>Speeldata</h2>42        <table>43          <tr>44            <th>Dag</th>45            <th>Uur</th>46          </tr>47          <tr>48            <td>Vrijdag 14 maart</td>49            <td>20 uur</td>50          </tr>51          <tr>52            <td>Zaterdag 15 maart</td>53            <td>20 uur</td>54          </tr>55          <tr>56            <td>Zondag 16 maart</td>57            <td>15 uur</td>58          </tr>59        </table>60      </section>61      <section id="downloads">62        <h2>Om te lezen</h2>63        <ul>64          <li><a href="programma.pdf">Het programmaboekje</a></li>65          <li><a href="reglement.pdf">Het reglement</a></li>66          <li><a href="https://nl.wikipedia.org/wiki/De_vrek">Over De Vrek</a></li>67          <li><a href="mailto:kassa@doekopen.example">Mail de kassa</a></li>68        </ul>69      </section>70    </main>71    <footer>72      <p>Zaal De Kroon, Kerkstraat 21, Geel</p>73    </footer>74  </body>75</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fbf6ee;5  color: #2b1d1d;6}7header {8  padding: 20px 16px 14px;9  background: #5c1515;10  color: #f5e6c8;11}12header h1 {13  margin: 0;14}15.slogan {16  margin: 4px 0 12px;17}18#menu ul {19  display: flex;20  flex-wrap: wrap;21  gap: 4px 18px;22  margin: 0;23  padding: 0;24  list-style: none;25}26#menu a {27  color: #f5e6c8;28}29main {30  padding: 8px 16px 24px;31}32h2 {33  color: #7a1c1c;34}35a {36  color: #7a1c1c;37}38.stuk {39  margin: 12px 0;40  padding: 12px 16px;41  border-radius: 16px;42  background: #ffffff;43}44.stuk h3 {45  margin: 0 0 4px;46}47blockquote {48  margin: 8px 0;49  padding-left: 12px;50  border-left: 3px solid #d4a017;51}52.knop {53  display: inline-block;54  padding: 6px 16px;55  border-radius: 999px;56  background-color: #7a1c1c;57  color: #ffffff;58  text-decoration: none;59}60table {61  border-collapse: collapse;62}63th,64td {65  padding: 6px 10px;66  border: 1px solid #e6d3c3;67  text-align: left;68}69footer {70  padding: 12px 16px;71  background: #5c1515;72  color: #f5e6c8;73}

toneel.example