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

Tell us what’s happening:
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><span class="sr-only year">2021</span></th>
            </tr>
          </thead>
          <tbody>
          </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/103.0.0.0 Safari/537.36

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

Link to the challenge:

you didn’t say what your issue is, but your code looks correct except for one small thing.
you will need to additionally set your third element’s class to “current” like so;

<th class="current">

so then the entire line will be;

 <th class="current"><span class="sr-only year">2021</span></th>

leaving you with this;

              <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>

hope this helps someone else, since I was looking for guidance on this exact issue and I finally realized what mistake I was making.

5 Likes

well, this take me half of hour to try to figure out what’s wrong but still can’t recon that the request is change “class” of “th” tag, not class of “span” tag :frowning:

hmm, well. on my working submission only the third <th> element had the class attribute set. is that the case with your code?
feel free to quote your code problem between two sets of triple back ticks like this => ``` (left of the “1” key below the “Esc” key.).

If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.