Learn HTML and CSS: Attribute selectors

Picking by attribute

Frank wants it to be obvious which links open a PDF. The links have no class, and he doesn't fancy giving them all one. But their `href` already gives it away.

An attribute as a selector

A selector in square brackets picks elements by their attributes. a[href="programme.pdf"] finds the link with exactly that href.

Without a value it only checks that the attribute is there: img[alt] finds every image with alt text.

That way you don't need a class: the attribute is there anyway.

index.html

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>Curtain Up drama club</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1>Curtain Up</h1>11      <p class="slogan">Drama club in Grantham since 1952</p>12      <nav id="menu">13        <ul>14          <li><a href="index.html">Home</a></li>15          <li class="active"><a href="playbill.html">Playbill</a></li>16          <li><a href="join.html">Join us</a></li>17          <li><a href="contact.html">Contact</a></li>18        </ul>19      </nav>20    </header>21    <main>22      <section id="playbill">23        <h2>On the playbill</h2>24        <article class="play">25          <h3>The Miser</h3>26          <p class="date">14 to 16 March</p>27          <p>A farce after <a href="https://en.wikipedia.org/wiki/Molière">Molière</a>, about a man who loves his money more than his children.</p>28          <blockquote>29            <p>I haven't laughed this much in years.</p>30          </blockquote>31          <a class="button" href="https://tickets.curtainup.example/miser">Tickets</a>32        </article>33        <article class="play">34          <h3>Murder at the Rectory</h3>35          <p class="date">9 to 11 May</p>36          <p>Everyone has an alibi, except the cat.</p>37          <a class="button" href="https://tickets.curtainup.example/rectory">Tickets</a>38        </article>39      </section>40      <section id="dates">41        <h2>Performances</h2>42        <table>43          <tr>44            <th>Day</th>45            <th>Time</th>46          </tr>47          <tr>48            <td>Friday 14 March</td>49            <td>8 pm</td>50          </tr>51          <tr>52            <td>Saturday 15 March</td>53            <td>8 pm</td>54          </tr>55          <tr>56            <td>Sunday 16 March</td>57            <td>3 pm</td>58          </tr>59        </table>60      </section>61      <section id="downloads">62        <h2>To read</h2>63        <ul>64          <li><a href="programme.pdf">The programme</a></li>65          <li><a href="rules.pdf">The club rules</a></li>66          <li><a href="https://en.wikipedia.org/wiki/The_Miser">About The Miser</a></li>67          <li><a href="mailto:boxoffice@curtainup.example">Email the box office</a></li>68        </ul>69      </section>70    </main>71    <footer>72      <p>The Crown Hall, 21 Church Street, Grantham</p>73    </footer>74  </body>75</html>

style.css

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

toneel.example

Starts with, ends with

Often you only know part of the value. Then you put a character before the =:

^= means "starts with": a[href^="https"] finds every link to another website. $= means "ends with": a[href$=".pdf"] finds every PDF. And *= means "contains somewhere".

Put the value in quotes, especially when it has a full stop, a colon or a slash in it.

index.html

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>Curtain Up drama club</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1>Curtain Up</h1>11      <p class="slogan">Drama club in Grantham since 1952</p>12      <nav id="menu">13        <ul>14          <li><a href="index.html">Home</a></li>15          <li class="active"><a href="playbill.html">Playbill</a></li>16          <li><a href="join.html">Join us</a></li>17          <li><a href="contact.html">Contact</a></li>18        </ul>19      </nav>20    </header>21    <main>22      <section id="playbill">23        <h2>On the playbill</h2>24        <article class="play">25          <h3>The Miser</h3>26          <p class="date">14 to 16 March</p>27          <p>A farce after <a href="https://en.wikipedia.org/wiki/Molière">Molière</a>, about a man who loves his money more than his children.</p>28          <blockquote>29            <p>I haven't laughed this much in years.</p>30          </blockquote>31          <a class="button" href="https://tickets.curtainup.example/miser">Tickets</a>32        </article>33        <article class="play">34          <h3>Murder at the Rectory</h3>35          <p class="date">9 to 11 May</p>36          <p>Everyone has an alibi, except the cat.</p>37          <a class="button" href="https://tickets.curtainup.example/rectory">Tickets</a>38        </article>39      </section>40      <section id="dates">41        <h2>Performances</h2>42        <table>43          <tr>44            <th>Day</th>45            <th>Time</th>46          </tr>47          <tr>48            <td>Friday 14 March</td>49            <td>8 pm</td>50          </tr>51          <tr>52            <td>Saturday 15 March</td>53            <td>8 pm</td>54          </tr>55          <tr>56            <td>Sunday 16 March</td>57            <td>3 pm</td>58          </tr>59        </table>60      </section>61      <section id="downloads">62        <h2>To read</h2>63        <ul>64          <li><a href="programme.pdf">The programme</a></li>65          <li><a href="rules.pdf">The club rules</a></li>66          <li><a href="https://en.wikipedia.org/wiki/The_Miser">About The Miser</a></li>67          <li><a href="mailto:boxoffice@curtainup.example">Email the box office</a></li>68        </ul>69      </section>70    </main>71    <footer>72      <p>The Crown Hall, 21 Church Street, Grantham</p>73    </footer>74  </body>75</html>

style.css

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

toneel.example

Try it yourself

Make every link to a PDF bold, and give every link that opens an email the colour #2a6f4e. The other links stay as they are.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>Curtain Up drama club</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1>Curtain Up</h1>11      <p class="slogan">Drama club in Grantham since 1952</p>12      <nav id="menu">13        <ul>14          <li><a href="index.html">Home</a></li>15          <li class="active"><a href="playbill.html">Playbill</a></li>16          <li><a href="join.html">Join us</a></li>17          <li><a href="contact.html">Contact</a></li>18        </ul>19      </nav>20    </header>21    <main>22      <section id="playbill">23        <h2>On the playbill</h2>24        <article class="play">25          <h3>The Miser</h3>26          <p class="date">14 to 16 March</p>27          <p>A farce after <a href="https://en.wikipedia.org/wiki/Molière">Molière</a>, about a man who loves his money more than his children.</p>28          <blockquote>29            <p>I haven't laughed this much in years.</p>30          </blockquote>31          <a class="button" href="https://tickets.curtainup.example/miser">Tickets</a>32        </article>33        <article class="play">34          <h3>Murder at the Rectory</h3>35          <p class="date">9 to 11 May</p>36          <p>Everyone has an alibi, except the cat.</p>37          <a class="button" href="https://tickets.curtainup.example/rectory">Tickets</a>38        </article>39      </section>40      <section id="dates">41        <h2>Performances</h2>42        <table>43          <tr>44            <th>Day</th>45            <th>Time</th>46          </tr>47          <tr>48            <td>Friday 14 March</td>49            <td>8 pm</td>50          </tr>51          <tr>52            <td>Saturday 15 March</td>53            <td>8 pm</td>54          </tr>55          <tr>56            <td>Sunday 16 March</td>57            <td>3 pm</td>58          </tr>59        </table>60      </section>61      <section id="downloads">62        <h2>To read</h2>63        <ul>64          <li><a href="programme.pdf">The programme</a></li>65          <li><a href="rules.pdf">The club rules</a></li>66          <li><a href="https://en.wikipedia.org/wiki/The_Miser">About The Miser</a></li>67          <li><a href="mailto:boxoffice@curtainup.example">Email the box office</a></li>68        </ul>69      </section>70    </main>71    <footer>72      <p>The Crown Hall, 21 Church Street, Grantham</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.play {39  margin: 12px 0;40  padding: 12px 16px;41  border-radius: 16px;42  background: #ffffff;43}44.play h3 {45  margin: 0 0 4px;46}47blockquote {48  margin: 8px 0;49  padding-left: 12px;50  border-left: 3px solid #d4a017;51}52.button {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

Ready for more?

The full lesson has 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

An attribute as a selector

A selector in square brackets picks elements by their attributes. a[href="programme.pdf"] finds the link with exactly that href.

Without a value it only checks that the attribute is there: img[alt] finds every image with alt text.

That way you don't need a class: the attribute is there anyway.

index.html

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>Curtain Up drama club</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1>Curtain Up</h1>11      <p class="slogan">Drama club in Grantham since 1952</p>12      <nav id="menu">13        <ul>14          <li><a href="index.html">Home</a></li>15          <li class="active"><a href="playbill.html">Playbill</a></li>16          <li><a href="join.html">Join us</a></li>17          <li><a href="contact.html">Contact</a></li>18        </ul>19      </nav>20    </header>21    <main>22      <section id="playbill">23        <h2>On the playbill</h2>24        <article class="play">25          <h3>The Miser</h3>26          <p class="date">14 to 16 March</p>27          <p>A farce after <a href="https://en.wikipedia.org/wiki/Molière">Molière</a>, about a man who loves his money more than his children.</p>28          <blockquote>29            <p>I haven't laughed this much in years.</p>30          </blockquote>31          <a class="button" href="https://tickets.curtainup.example/miser">Tickets</a>32        </article>33        <article class="play">34          <h3>Murder at the Rectory</h3>35          <p class="date">9 to 11 May</p>36          <p>Everyone has an alibi, except the cat.</p>37          <a class="button" href="https://tickets.curtainup.example/rectory">Tickets</a>38        </article>39      </section>40      <section id="dates">41        <h2>Performances</h2>42        <table>43          <tr>44            <th>Day</th>45            <th>Time</th>46          </tr>47          <tr>48            <td>Friday 14 March</td>49            <td>8 pm</td>50          </tr>51          <tr>52            <td>Saturday 15 March</td>53            <td>8 pm</td>54          </tr>55          <tr>56            <td>Sunday 16 March</td>57            <td>3 pm</td>58          </tr>59        </table>60      </section>61      <section id="downloads">62        <h2>To read</h2>63        <ul>64          <li><a href="programme.pdf">The programme</a></li>65          <li><a href="rules.pdf">The club rules</a></li>66          <li><a href="https://en.wikipedia.org/wiki/The_Miser">About The Miser</a></li>67          <li><a href="mailto:boxoffice@curtainup.example">Email the box office</a></li>68        </ul>69      </section>70    </main>71    <footer>72      <p>The Crown Hall, 21 Church Street, Grantham</p>73    </footer>74  </body>75</html>

style.css

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

toneel.example

Starts with, ends with

Often you only know part of the value. Then you put a character before the =:

^= means "starts with": a[href^="https"] finds every link to another website. $= means "ends with": a[href$=".pdf"] finds every PDF. And *= means "contains somewhere".

Put the value in quotes, especially when it has a full stop, a colon or a slash in it.

index.html

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>Curtain Up drama club</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1>Curtain Up</h1>11      <p class="slogan">Drama club in Grantham since 1952</p>12      <nav id="menu">13        <ul>14          <li><a href="index.html">Home</a></li>15          <li class="active"><a href="playbill.html">Playbill</a></li>16          <li><a href="join.html">Join us</a></li>17          <li><a href="contact.html">Contact</a></li>18        </ul>19      </nav>20    </header>21    <main>22      <section id="playbill">23        <h2>On the playbill</h2>24        <article class="play">25          <h3>The Miser</h3>26          <p class="date">14 to 16 March</p>27          <p>A farce after <a href="https://en.wikipedia.org/wiki/Molière">Molière</a>, about a man who loves his money more than his children.</p>28          <blockquote>29            <p>I haven't laughed this much in years.</p>30          </blockquote>31          <a class="button" href="https://tickets.curtainup.example/miser">Tickets</a>32        </article>33        <article class="play">34          <h3>Murder at the Rectory</h3>35          <p class="date">9 to 11 May</p>36          <p>Everyone has an alibi, except the cat.</p>37          <a class="button" href="https://tickets.curtainup.example/rectory">Tickets</a>38        </article>39      </section>40      <section id="dates">41        <h2>Performances</h2>42        <table>43          <tr>44            <th>Day</th>45            <th>Time</th>46          </tr>47          <tr>48            <td>Friday 14 March</td>49            <td>8 pm</td>50          </tr>51          <tr>52            <td>Saturday 15 March</td>53            <td>8 pm</td>54          </tr>55          <tr>56            <td>Sunday 16 March</td>57            <td>3 pm</td>58          </tr>59        </table>60      </section>61      <section id="downloads">62        <h2>To read</h2>63        <ul>64          <li><a href="programme.pdf">The programme</a></li>65          <li><a href="rules.pdf">The club rules</a></li>66          <li><a href="https://en.wikipedia.org/wiki/The_Miser">About The Miser</a></li>67          <li><a href="mailto:boxoffice@curtainup.example">Email the box office</a></li>68        </ul>69      </section>70    </main>71    <footer>72      <p>The Crown Hall, 21 Church Street, Grantham</p>73    </footer>74  </body>75</html>

style.css

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

toneel.example

Try it yourself

Make every link to a PDF bold, and give every link that opens an email the colour #2a6f4e. The other links stay as they are.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>Curtain Up drama club</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1>Curtain Up</h1>11      <p class="slogan">Drama club in Grantham since 1952</p>12      <nav id="menu">13        <ul>14          <li><a href="index.html">Home</a></li>15          <li class="active"><a href="playbill.html">Playbill</a></li>16          <li><a href="join.html">Join us</a></li>17          <li><a href="contact.html">Contact</a></li>18        </ul>19      </nav>20    </header>21    <main>22      <section id="playbill">23        <h2>On the playbill</h2>24        <article class="play">25          <h3>The Miser</h3>26          <p class="date">14 to 16 March</p>27          <p>A farce after <a href="https://en.wikipedia.org/wiki/Molière">Molière</a>, about a man who loves his money more than his children.</p>28          <blockquote>29            <p>I haven't laughed this much in years.</p>30          </blockquote>31          <a class="button" href="https://tickets.curtainup.example/miser">Tickets</a>32        </article>33        <article class="play">34          <h3>Murder at the Rectory</h3>35          <p class="date">9 to 11 May</p>36          <p>Everyone has an alibi, except the cat.</p>37          <a class="button" href="https://tickets.curtainup.example/rectory">Tickets</a>38        </article>39      </section>40      <section id="dates">41        <h2>Performances</h2>42        <table>43          <tr>44            <th>Day</th>45            <th>Time</th>46          </tr>47          <tr>48            <td>Friday 14 March</td>49            <td>8 pm</td>50          </tr>51          <tr>52            <td>Saturday 15 March</td>53            <td>8 pm</td>54          </tr>55          <tr>56            <td>Sunday 16 March</td>57            <td>3 pm</td>58          </tr>59        </table>60      </section>61      <section id="downloads">62        <h2>To read</h2>63        <ul>64          <li><a href="programme.pdf">The programme</a></li>65          <li><a href="rules.pdf">The club rules</a></li>66          <li><a href="https://en.wikipedia.org/wiki/The_Miser">About The Miser</a></li>67          <li><a href="mailto:boxoffice@curtainup.example">Email the box office</a></li>68        </ul>69      </section>70    </main>71    <footer>72      <p>The Crown Hall, 21 Church Street, Grantham</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.play {39  margin: 12px 0;40  padding: 12px 16px;41  border-radius: 16px;42  background: #ffffff;43}44.play h3 {45  margin: 0 0 4px;46}47blockquote {48  margin: 8px 0;49  padding-left: 12px;50  border-left: 3px solid #d4a017;51}52.button {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