Learn HTML and CSS: Pseudo-classes

Pseudo-classes

On the Curtain Up site nothing happens when you move the mouse over a button. "A theatre without lighting," sighs Frank. And the table of performances reads like one grey wall.

A state

A pseudo-class picks an element in a certain state. It starts with a colon, right after the selector.

:hover applies while the mouse is on the element. :focus applies when the element has been chosen with the keyboard: anyone who moves through the links with the Tab key can see where they are.

On a computer you can try it straight away: move the mouse over a ticket button. On a phone hover barely exists, so never put anything important in a hover alone.

style.css

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

toneel.example

A position

Other pseudo-classes pick an element by its position among its brothers and sisters. li:first-child is the first <li> of its list, li:last-child the last.

:nth-child(3) is the third. With :nth-child(even) you pick the even ones, with :nth-child(odd) the odd ones: 1, 3, 5.

That's how you give every other row of a table a tint, without a class on each row.

style.css

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

toneel.example

Try it yourself

Give every button (.button) the background #b8860b while the mouse is on it, and also when it's chosen with the Tab key. At rest it stays as it is.

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 6 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

A state

A pseudo-class picks an element in a certain state. It starts with a colon, right after the selector.

:hover applies while the mouse is on the element. :focus applies when the element has been chosen with the keyboard: anyone who moves through the links with the Tab key can see where they are.

On a computer you can try it straight away: move the mouse over a ticket button. On a phone hover barely exists, so never put anything important in a hover alone.

style.css

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

toneel.example

A position

Other pseudo-classes pick an element by its position among its brothers and sisters. li:first-child is the first <li> of its list, li:last-child the last.

:nth-child(3) is the third. With :nth-child(even) you pick the even ones, with :nth-child(odd) the odd ones: 1, 3, 5.

That's how you give every other row of a table a tint, without a class on each row.

style.css

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

toneel.example

Try it yourself

Give every button (.button) the background #b8860b while the mouse is on it, and also when it's chosen with the Tab key. At rest it stays as it is.

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