Learn HTML and CSS: Specificity

Specificity

Frank's nephew once wrote `#playbill p { color: grey; }`. Now Frank can't get the dates red, however often he puts `.date` at the bottom.

The heaviest selector wins

When selectors differ, their specificity decides first: how precisely they point at an element. Only in a tie does the order count.

You count three things: ids, then classes (attributes and pseudo-classes too), then elements. #playbill p has 1 id and 1 element: 1-0-1. .date has 1 class: 0-1-0.

Compare from left to right: the first number that differs decides. So one id beats ten classes. The cascade under the page shows why the date stays grey.

style.css

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

toneel.example

Why !important is no solution

With !important after a value, a declaration beats everything, even an id. It looks like a quick fix.

But anyone who wants to change something later then needs !important too, and with two !importants specificity decides again. That starts an arms race that makes your CSS unreadable.

Better: make your selector just heavy enough, or make the rule that's too heavy lighter.

style.css

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

toneel.example

Try it yourself

Make the link of the active menu item (class active) gold (#d4a017). Watch out: basis.css already colours the menu links with #menu a.

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

The heaviest selector wins

When selectors differ, their specificity decides first: how precisely they point at an element. Only in a tie does the order count.

You count three things: ids, then classes (attributes and pseudo-classes too), then elements. #playbill p has 1 id and 1 element: 1-0-1. .date has 1 class: 0-1-0.

Compare from left to right: the first number that differs decides. So one id beats ten classes. The cascade under the page shows why the date stays grey.

style.css

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

toneel.example

Why !important is no solution

With !important after a value, a declaration beats everything, even an id. It looks like a quick fix.

But anyone who wants to change something later then needs !important too, and with two !importants specificity decides again. That starts an arms race that makes your CSS unreadable.

Better: make your selector just heavy enough, or make the rule that's too heavy lighter.

style.css

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

toneel.example

Try it yourself

Make the link of the active menu item (class active) gold (#d4a017). Watch out: basis.css already colours the menu links with #menu a.

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