Learn More About CSS Pseudo Selectors by Building A Balance Sheet - Step 13

HTML-CSS
1

Tell us what’s happening:

Step 13
In your first tr, add a th element with the text Cash This is the cash we currently have on hand… Wrap all of that text except Cash in a span element with the class set to description.

Following that, add three td elements with the following text (in order): $25, $30, $28. Give the third td element a class attribute set to current.

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>

<!-- User Editable Region -->

              <tr class="data">
                <th>Cash This is the cash we currently have on hand.<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>
                  
                  
                

<!-- User Editable Region -->

              <tr class="data">
              </tr>
              <tr class="data">
              </tr>
              <tr class="total">
              </tr>
            </tbody>
          </table>
          <table>
          </table>
          <table>
          </table>
        </div>
      </section>
    </main>
  </body>
</html>

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Learn More About CSS Pseudo Selectors by Building A Balance Sheet - Step 13

2

Hello!

Remove the This is the cash we currently have on hand. that is in-front of your span element opening tag and leave a space in-between Cash and the span element opening tag. And there should be no spaces directly after your span element opening tag and no spaces directly before the span element closing tag.

3

Hi @thuthutheinaung.ce

Recheck the instructions for the <span> element. There is no need for an additional “This is the cash we currently have on hand” text within the <th> element. Happy coding!

1 Like