Tell us what’s happening:
Describe your issue in detail here.
I’m having trouble with the spans that are being requested here. The class calls for an attribute of “sr-only year” for the first two spans and “current” for the third span. I’m not sure if there is something that I’m overlooking or what’s going on.
Any assistance is greatly 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>
<span class="current"> 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/104.0.5112.81 Safari/537.36
Challenge: Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 11
Link to the challenge: