7.0 KiB
7.0 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 620192a767533a7ad19d96d7 | Step 56 | 0 | step-56 |
--description--
La differenza principale tra tr[class="total"] e tr.total è che il primo seleziona gli elementi tr in cui l'attributo class ha solo il valore total. Il secondo selezionerà gli elementi tr in cui il valore dell'attributo class include total.
Nel tuo caso, tr.total funzionerà. È possibile utilizzare questo selettore per selezionare tutti gli elementi td all'interno delle righe .total. Allinea il testo a destra e assegna loro un padding di 0 0.25rem.
--hints--
Dovresti avere un selettore tr.total td.
assert(new __helpers.CSSHelp(document).getStyle('tr.total td'));
Il selettore tr.total td dovrebbe avere una proprietà text-align con il valore right.
assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('text-align') === 'right');
Il selettore tr.total td dovrebbe avere una proprietà padding con il valore 0 0.25rem.
assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('padding') === '0px 0.25rem');
--seed--
--seed-contents--
<!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>
</tr>
</thead>
<tbody>
<tr class="data">
<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>
<tr class="data">
<th>Checking <span class="description">Our primary transactional account.</span></th>
<td>$54</td>
<td>$56</td>
<td class="current">$53</td>
</tr>
<tr class="data">
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
<td>$500</td>
<td>$650</td>
<td class="current">$728</td>
</tr>
<tr class="total">
<th>Total <span class="sr-only">Assets</span></th>
<td>$579</td>
<td>$736</td>
<td class="current">$809</td>
</tr>
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<thead>
<tr>
<td></td>
<th><span class="sr-only">2019</span></th>
<th><span class="sr-only">2020</span></th>
<th><span class="sr-only">2021</span></th>
</tr>
</thead>
<tbody>
<tr class="data">
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
<td>$500</td>
<td>$250</td>
<td class="current">$0</td>
</tr>
<tr class="data">
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
<td>$200</td>
<td>$300</td>
<td class="current">$400</td>
</tr>
<tr class="data">
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
<td>$50</td>
<td>$50</td>
<td class="current">$75</td>
</tr>
<tr class="total">
<th>Total <span class="sr-only">Liabilities</span></th>
<td>$750</td>
<td>$600</td>
<td class="current">$475</td>
</tr>
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<thead>
<tr>
<td></td>
<th><span class="sr-only">2019</span></th>
<th><span class="sr-only">2020</span></th>
<th><span class="sr-only">2021</span></th>
</tr>
</thead>
<tbody>
<tr class="total">
<th>Total <span class="sr-only">Net Worth</span></th>
<td>$-171</td>
<td>$136</td>
<td class="current">$334</td>
</tr>
</tbody>
</table>
</div>
</section>
</main>
</body>
</html>
span[class~="sr-only"] {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
clip-path: inset(50%) !important;
-webkit-clip-path: inset(50%) !important;
height: 1px !important;
width: 1px !important;
position: absolute !important;
overflow: hidden !important;
white-space: nowrap !important;
padding: 0 !important;
margin: -1px !important;
}
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;
gap: 1rem;
}
h1 .flex span:first-of-type {
font-size: 0.7em;
}
h1 .flex span:last-of-type {
font-size: 1.2em;
}
section {
max-width: 40rem;
margin: 0 auto;
border: 2px solid #d0d0d5;
}
#years {
display: flex;
justify-content: flex-end;
position: sticky;
top: 0;
background: #0a0a23;
color: #fff;
z-index: 999;
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
margin: 0 -2px;
}
#years span[class] {
font-weight: bold;
width: 4.5rem;
text-align: right;
}
.table-wrap {
padding: 0 0.75rem 1.5rem 0.75rem;
}
span {
font-weight: normal;
}
table {
border-collapse: collapse;
border: 0;
width: 100%;
position: relative;
margin-top: 3rem;
}
table caption {
color: #356eaf;
font-size: 1.3em;
font-weight: normal;
position: absolute;
top: -2.25rem;
left: 0.5rem;
}
tbody td {
width: 100vw;
min-width: 4rem;
max-width: 4rem;
}
tbody th {
width: calc(100% - 12rem);
}
tr[class="total"] {
border-bottom: 4px double #0a0a23;
font-weight: bold;
}
tr[class="total"] th {
text-align: left;
padding: 0.5rem 0 0.25rem 0.5rem;
}
--fcc-editable-region--
--fcc-editable-region--