8.1 KiB
8.1 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 6201a42e39bf3b95b6a33bf3 | Step 62 | 0 | step-62 |
--description--
Crea un selettore tr.data th .description per selezionare gli elementi con l'attributo class impostato su description che si trovano all'interno degli elementi th nelle righe .data della tabella. Assegna loro una proprietà display con il valore block, imposta il testo in corsivo con uno spessore normale e posizionali con un padding impostato su 1rem 0 0.75rem e un margine destro di -13.5rem.
--hints--
Dovresti avere un selettore tr.data th .description.
assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description'));
Il selettore tr.data th .description dovrebbe avere una proprietà display impostata su block.
assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('display') === 'block');
Il selettore tr.data th .description dovrebbe avere una proprietà font-style impostata su italic.
assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-style') === 'italic');
Il selettore tr.data th .description dovrebbe avere una proprietà font-weight impostata su normal.
assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-weight') === 'normal');
Il selettore tr.data th .description dovrebbe avere una proprietà padding impostata a 1rem 0 0.75rem.
assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('padding') === '1rem 0px 0.75rem');
Il selettore tr.data th .description dovrebbe avere un proprietà margin-right con il valore -13.5rem.
assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('margin-right') === '-13.5rem');
--seed--
--seed-contents--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Balance Sheet</title>
<link rel="stylesheet" type="text/css" 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;
}
tr.total td {
text-align: right;
padding: 0 0.25rem;
}
tr.total td:nth-of-type(3) {
padding-right: 0.5rem;
}
tr.total:hover {
background-color: #99c9ff;
}
td.current {
font-style: italic;
}
tr.data {
background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
}
tr.data th {
text-align: left;
padding-top: 0.3rem;
padding-left: 0.5rem;
}
--fcc-editable-region--
--fcc-editable-region--