Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 11

Tell us what’s happening:
Describe your issue in detail here.
I am not sure what I did wrong in this one when I followed the directions.

Instructions:
Within each of your new th elements, nest a span element with the class set to sr-only year. Give them the following text (in order): 2019, 2020, and 2021.

Give your third th element the class attribute set to current.

Leave the td element empty. This element exists only to ensure your table has a four-column layout and associate the headers with the correct columns.

              <th><span class="sr-only year">2019</span></th>
              <th><span class="sr-only year">2020</span></th>
              <th><span class="current">2021</span></th>
  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Balance Sheet</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <main>
    <section>
      <h1>
        <span class="flex">
          <span>AcmeWidgetCorp</span>
          <span>Balance Sheet</span>
        </span>
      </h1>
      <div id="years" aria-hidden="true">
        <span class="year">2019</span>
        <span class="year">2020</span>
        <span class="year">2021</span>
      </div>
      <div class="table-wrap">
        <table>
          <caption>Assets</caption>
          <thead>
            <tr>
              <td></td>
              <th><span class="sr-only year">2019</span></th>
              <th><span class="sr-only year">2020</span></th>
              <th><span class="current">2021</span></th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
        <table>
        </table>
        <table>
        </table>
      </div>
    </section>
  </main>
</body>
</html>
/* file: styles.css */

Challenge: Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 11

Link to the challenge:

The span in the third th isn’t correct. It should have the class attribute set the same as the other two.

That’s the th element, not the span in the th element.

1 Like