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

Tell us what’s happening:

I have read the task description and checked my code thoroughly , but could not pass the step.
Still I get the error “Your first tr should have a th element.”
and errors for all other following steps as if nothing was added.
Help appreciated.

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>
                <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>
            </thead>
            <tbody>

<!-- User Editable Region -->

              <tr class="data">
              </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/133.0.0.0 Safari/537.36

Challenge Information:

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

You seem to be solving the challenge in the wrong tr element.
You are supposed to add the th element in the user editable region which starts from line 35, but you are adding it on line 32.

1 Like

Thank you. But no solution.
I have moved that line 3 lines below,
And on the other hand I have it on the first “tr” as a “th” element.
Further below it will not be the first “tr”.
I have even replicated the code line
“Cash This is the cash we currently have on hand.
and put it to the next “tr” element, but none of the errors has changed.
What would you suggest?

Can you please send me the current code?

Sure, thank you for your return.
I did not delete the dummy duplicates as well. Here you are:
/* …

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

… */
And so are the errors, in case you need them. :

  1. Your first tr should have a th element.
  2. Your th element should have the text Cash This is the cash we currently have on hand…
  3. You should wrap the text This is the cash we currently have on hand. in a span element.
  4. Your span element should have the class attribute set to description.
  5. You should have three td elements.
  6. Your first td element should have the text $25.
  7. Your second td element should have the text $30.
  8. Your third td element should have the text $28.
  9. Your third td element should have the class set to current.

Regards.

Hello again;
I see that the code lines are being converted into outputs.
If you tell me how, I can re-paste them.

Put backticks (`) around the code.

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

remove the one you added inside thead, or maybe better reset the step and re-add the correct one again

I have reset the step and wrote it over again.
Nothing changed. Still the first error is
" Your first tr should have a th element. " and 8 more follow.
My code is as follows :

<!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>
                <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>
            </thead>
            <tbody>
              <tr class="data">
              </tr>
              <tr class="data">
              </tr>
              <tr class="data">
              </tr>
              <tr class="total">
              </tr>
            </tbody>
          </table>
          <table>
          </table>
          <table>
          </table>
        </div>
      </section>
    </main>
  </body>
</html>

I hope you can figure it out.
Thanks in advance.

You were given the reason your code is not passing:

The new code goes in the next tr, not the one you’re in. You should be coding between the <!-- User Editable Region --> comments, not above it.

RESET again, please, and this time add your code inside the tr shown between the <!-- User Editable Region --> comments.

the first tr in the tbody
stop adding stuff to the thead

1 Like

OK, it worked.
Thank you all.
Then again, I find it confusing, when the instruction is “add it to the first tr element”.
So I go and find the first tr element.
I am not an expert coder yet and cannot differentiate between and as explicitly as you do. :wink:
Thanks again and be well.

the implicit is “the first tr in the editable region”, the isntructions always refer to the highlighted part, you don’t need to go search for code outside that part