Learn HTML and CSS: Combinators

Combining selectors

Frank wants the paragraphs in the playbill cards grey. With `p` he greys every paragraph on the site, the address at the bottom included. Time to combine selectors.

Somewhere inside

Two selectors with a space between them look for the second element somewhere inside the first: .play p finds every <p> inside an element with the class play, however deep.

That way you pick exactly the paragraphs of the cards, and the other paragraphs on the page are left alone.

Such a selector is easiest to read from right to left: "every p that sits somewhere in a .play".

style.css

1.play p {2  color: #6b5b5b;3}

toneel.example

Only the children

Sometimes you don't want everything inside, only the children: the elements directly inside the parent. For that you put a > between the selectors.

The first card has a quote from a reviewer, a <blockquote> with a <p> of its own. .play > p finds the paragraphs directly in the card, but not the one in the quote: its parent is the <blockquote>.

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

1.play > p {2  color: #6b5b5b;3}

toneel.example

Grouping with a comma

When several elements need the same style, put their selectors in front of one rule with a comma: h2, h3 { … } applies to every h2 and every h3.

Mind the difference with a space: h2 h3 looks for an h3 inside an h2, and there never is one.

And if one selector in the group is written wrong, the browser drops the whole rule, for the other selectors too.

style.css

1h2, h3 {2  font-family: Georgia, serif;3}

toneel.example

Try it yourself

Make the paragraphs directly inside a card grey (#6b5b5b), and the links in the menu bold. The quote and 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

Learn HTML and CSS: Combinators

Combining selectors

Frank wants the paragraphs in the playbill cards grey. With `p` he greys every paragraph on the site, the address at the bottom included. Time to combine selectors.

Somewhere inside

Two selectors with a space between them look for the second element somewhere inside the first: .play p finds every <p> inside an element with the class play, however deep.

That way you pick exactly the paragraphs of the cards, and the other paragraphs on the page are left alone.

Such a selector is easiest to read from right to left: "every p that sits somewhere in a .play".

style.css

1.play p {2  color: #6b5b5b;3}

toneel.example

Only the children

Sometimes you don't want everything inside, only the children: the elements directly inside the parent. For that you put a > between the selectors.

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

1.play > p {2  color: #6b5b5b;3}

toneel.example

Grouping with a comma

When several elements need the same style, put their selectors in front of one rule with a comma: h2, h3 { … } applies to every h2 and every h3.

Mind the difference with a space: h2 h3 looks for an h3 inside an h2, and there never is one.

And if one selector in the group is written wrong, the browser drops the whole rule, for the other selectors too.

style.css

1h2, h3 {2  font-family: Georgia, serif;3}

toneel.example

Try it yourself

Make the paragraphs directly inside a card grey (#6b5b5b), and the links in the menu bold. The quote and 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