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

I cannot get my code for step 37 to work no matter what I do. What am I missing?

Balance Sheet

AcmeWidgetCorp Balance Sheet

2019 2020 2021
Assets
2019 2020 2021
Cash This is the cash we currently have on hand. $25 $30 $28
Checking Our primary transactional account. $54 $56 $53
Savings Funds set aside for emergencies. $500 $650 $728
Total Assets $579 $736 $809
Liabilities
2019 2020 2021
Loans The outstanding balance on our startup loan. $500 $250 $0
Expenses Annual anticipated expenses, such as payroll. $200 $300 $400
Credit The outstanding balance on our credit card. $50 $50 $75
Total Liabilities $750 $600 $475
Net Worth
2019 2020 2021
Total Net Worth $-171 $136 $334
span[class~="sr-only"] {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  padding: 0;
  margin: -1px;
}

html {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  color: #0a0a23;
}

h1 {
  max-width: 37.25rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
}

h1 .flex {
  display: flex;
  flex-direction: column-reverse;}

h1 .flex span:first-of-type {font-size: 0.7em;}

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

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

Link to the challenge:

Step 37

The :first-of-type pseudo-selector is used to target the first element that matches the selector. Create an h1 .flex span:first-of-type selector to target the first span element in your .flex container. Remember that your span elements are reversed, visually, so this will appear to be the second element on the page.

Give your new selector a font-size property of 0.7em to make it look like a sub-heading.

Welcome to our community!

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 the text.

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

P.S.
Your code is OK.

Try the following:

  1. Restart step
  2. Refresh page (F5)
  3. Some browser extensions, such as ad-blockers and dark mode extensions can interfere with the tests. If you face issues, we recommend disabling extensions that modify the content or layout of pages, while taking the course.
  4. Change the browser.
1 Like

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