--- id: 61940bfdc4e2a874af766567 title: Step 44 challengeType: 0 dashedName: step-44 --- # --description-- Arguably the most important part of a balance sheet is the totals. You want to be able to quickly cycle through the total values on your sheet. This can be achieved by using the `tabindex` attribute. Give each of your `.row total` elements a `tabindex` attribute set to `1`. It is important to note here that adjusting the `tabindex` value in this way can negatively affect the accessibility of your page, as it changes the flow of the document for assistive devices such as screen readers. # --hints-- Each of your `.row total` elements should have a `tabindex` attribute set to `1`. ```js const rows = [...document.querySelectorAll('.row.total')]; assert(rows?.every(row => row.getAttribute('tabindex') === '1')); ``` You should not set the `tabindex` on any other elements. ```js const elements = [...document.querySelectorAll('*[tabindex]')]; assert(elements?.every(element => element.classList.contains('row') && element.classList.contains('total'))); ``` # --seed-- ## --seed-contents-- ```html AcmeWidgetCorp Balance Sheet --fcc-editable-region--

Assets

Cash $25 $30 $28

This is the cash we currently have on hand.

Checking $54 $56 $53

Our primary transactional account.

Savings $500 $650 $728

Funds set aside for emergencies.

Total $579 $736 $809

Liabilities

Loans $500 $250 $0

The outstanding balance on our startup loan.

Expenses $200 $300 $400

Annual anticipated expenses, such as payroll.

Credit $50 $50 $75

The running balance on our line of credit.

Total $750 $600 $475

Net Worth

Total $-171 $136 $334

--fcc-editable-region-- ``` ```css body { text-align: center; font-family: Tahoma; color: #0a0a23; } #sheet { text-align: left; max-width: 500px; margin: auto; padding: 10px; border: 2px solid #d0d0d5; } #header h2 { font-size: 1.3em; } .row:nth-of-type(odd) { background-color: #dfdfe2; } .row:nth-of-type(even) { background-color: #d0d0d5; } .row:last-child { background-color: transparent; margin-bottom: 30px; } p[class~="total"] { border-bottom: 4px double #0a0a23; font-weight: bold; } .row { display: flex; justify-content: flex-end; border-bottom: 1px solid #0a0a23; padding: 4px; } span:not(.name) { margin-left: 10px; min-width: 15%; text-align: right; } span[class="current"] { font-style: italic; } .name { width: 100%; text-align: left; } ```