HTML en CSS leren: Attribuutselectors

Kiezen op attributen

Fons wil dat je meteen ziet welke links een pdf openen. De links hebben geen class, en hij heeft geen zin om ze er allemaal een te geven. Maar hun `href` verklapt het al.

Een attribuut als selector

Een selector tussen vierkante haken kiest elementen op hun attributen. a[href="programma.pdf"] vindt de link met precies die href.

Zonder waarde kijkt hij alleen of het attribuut er is: img[alt] vindt elke afbeelding met een alt-tekst.

Zo heb je geen class nodig: het attribuut staat er toch al.

index.html

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>

style.css

1a[href="programma.pdf"] {2  font-weight: bold;3}

toneel.example

Begint met, eindigt op

Vaak ken je maar een stukje van de waarde. Daarvoor zet je een teken voor de =:

^= betekent "begint met": a[href^="https"] vindt elke link naar een andere website. $= betekent "eindigt op": a[href$=".pdf"] vindt elke pdf. En *= betekent "bevat ergens".

De waarde zet je tussen aanhalingstekens, zeker als er een punt, een dubbele punt of een schuine streep in staat.

index.html

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>

style.css

1a[href$=".pdf"] {2  font-weight: bold;3}

toneel.example

Probeer het zelf

Maak elke link naar een pdf vet, en geef elke link die een mail opent de kleur #2a6f4e. De andere links blijven zoals ze zijn.

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 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Een attribuut als selector

Een selector tussen vierkante haken kiest elementen op hun attributen. a[href="programma.pdf"] vindt de link met precies die href.

Zonder waarde kijkt hij alleen of het attribuut er is: img[alt] vindt elke afbeelding met een alt-tekst.

Zo heb je geen class nodig: het attribuut staat er toch al.

index.html

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>

style.css

1a[href="programma.pdf"] {2  font-weight: bold;3}

toneel.example

Begint met, eindigt op

Vaak ken je maar een stukje van de waarde. Daarvoor zet je een teken voor de =:

^= betekent "begint met": a[href^="https"] vindt elke link naar een andere website. $= betekent "eindigt op": a[href$=".pdf"] vindt elke pdf. En *= betekent "bevat ergens".

De waarde zet je tussen aanhalingstekens, zeker als er een punt, een dubbele punt of een schuine streep in staat.

index.html

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>

style.css

1a[href$=".pdf"] {2  font-weight: bold;3}

toneel.example

Probeer het zelf

Maak elke link naar een pdf vet, en geef elke link die een mail opent de kleur #2a6f4e. De andere links blijven zoals ze zijn.

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