HTML en CSS leren: Specificiteit

Specificiteit

Fons' neef schreef ooit `#affiche p { color: gray; }`. Nu krijgt Fons de data niet meer rood, hoe vaak hij `.datum` ook onderaan zet.

De zwaarste selector wint

Als selectors verschillen, beslist eerst hun specificiteit: hoe precies ze een element aanwijzen. Pas bij een gelijke stand telt de volgorde.

Je telt drie dingen: id's, dan classes (ook attributen en pseudoklassen), dan elementen. #affiche p heeft 1 id en 1 element: 1-0-1. .datum heeft 1 class: 0-1-0.

Vergelijk van links naar rechts: het eerste getal dat verschilt, beslist. Eén id wint dus van tien classes. In de cascade onder de pagina zie je waarom de datum grijs blijft.

style.css

1#affiche p {2  color: #6b5b5b;3}4.datum {5  color: #7a1c1c;6}

toneel.example

Waarom !important geen oplossing is

Met !important achter een waarde wint een declaratie van alles, ook van een id. Het lijkt een snelle oplossing.

Maar wie later iets wil veranderen, heeft dan zelf !important nodig, en bij twee keer !important beslist de specificiteit opnieuw. Zo begint een wedloop die je CSS onleesbaar maakt.

Beter: maak je selector net zwaar genoeg, of maak de regel die te zwaar is lichter.

style.css

1#affiche p {2  color: #6b5b5b;3}4.datum {5  color: #7a1c1c !important;6}

toneel.example

Probeer het zelf

Maak de link van het actieve menu-item (class actief) goud (#d4a017). Let op: basis.css kleurt de menulinks al met #menu a.

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

De zwaarste selector wint

Als selectors verschillen, beslist eerst hun specificiteit: hoe precies ze een element aanwijzen. Pas bij een gelijke stand telt de volgorde.

Je telt drie dingen: id's, dan classes (ook attributen en pseudoklassen), dan elementen. #affiche p heeft 1 id en 1 element: 1-0-1. .datum heeft 1 class: 0-1-0.

Vergelijk van links naar rechts: het eerste getal dat verschilt, beslist. Eén id wint dus van tien classes. In de cascade onder de pagina zie je waarom de datum grijs blijft.

style.css

1#affiche p {2  color: #6b5b5b;3}4.datum {5  color: #7a1c1c;6}

toneel.example

Waarom !important geen oplossing is

Met !important achter een waarde wint een declaratie van alles, ook van een id. Het lijkt een snelle oplossing.

Maar wie later iets wil veranderen, heeft dan zelf !important nodig, en bij twee keer !important beslist de specificiteit opnieuw. Zo begint een wedloop die je CSS onleesbaar maakt.

Beter: maak je selector net zwaar genoeg, of maak de regel die te zwaar is lichter.

style.css

1#affiche p {2  color: #6b5b5b;3}4.datum {5  color: #7a1c1c !important;6}

toneel.example

Probeer het zelf

Maak de link van het actieve menu-item (class actief) goud (#d4a017). Let op: basis.css kleurt de menulinks al met #menu a.

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