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

Tell us what’s happening: why is this not passing?
Describe your issue in detail here.

  **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 class="current"><span class="sr-only year">2021</span></th>
            </tr>
          </thead>
          <tbody>
            <tr class="data">
              <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
              <td>$25</td>
              <td>$30</td>
              <td class="current">$28</td>
            </tr>
            <tr class="data">
              <th>Checking <span class="description">Our primary transactional account.</span></th>
              <td>$54</td>
              <td>$56</td>
              <td class="current">$53</td>
            </tr>
            <tr class="data">
              <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
              <td>$500</td>
              <td>$650</td>
              <td class="current">$728</td>
            </tr>
            <tr class="total">
              <th>Assets <span class="sr-only">Total Assets</span></th>
              <td>$579</td>
              <td>$736</td>
              <td class="current">$809</td>
            </tr>
          </tbody>
        </table>
        <table>
        </table>
        <table>
        </table>
      </div>
    </section>
  </main>
</body>
</html>
/* file: styles.css */

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

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

Link to the challenge:

This one is a little mixed-up.

"…add a th element with the text Total Assets.

Yours has the text “Assets Total Assets”

“Wrap the text Assets in a span element with the class attribute set to sr-only.”

Yours has the text “Total Assets” wrapped in the span.

the validator gives a green light. still getting this error - Your th element should have the text Total Assets . validator - https://validator.w3.org/nu/#textarea

<tr class="total"> <th>Total Assets <span class="sr-only">Assets</span></th> <td>$579</td> <td>$736</td> <td class="current">$809</td> </tr>

<tr class="total">
                <th>Total Assets <span class="sr-only">Assets</span></th>
                <td>$579</td>
                <td>$736</td>
                <td class="current">$809</td>
              </tr>

The validator only checks that your HTML is “legal”, it doesn’t check that your answer is correct.

Now the text of your th element is “Total Assets Assets”. You won’t see the second “Assets” in the preview because it is hidden from view by putting the sr-only class around it. But it is still there and screen reader users will hear it.

Re-read the instructions carefully. The text in the th should be “Total Assets”. The span goes just around the word “Assets”.

1 Like

thanks for. your patience :slight_smile: