---
id: 61fd75ea7f663457612dba02
title: Step 11
challengeType: 0
dashedName: step-11
---
# --description--
All'interno di ciascuno dei nuovi elementi `th`, annida un elemento `span` con l'attributo `class` del valore di `sr-only year`. Assegna loro il seguente testo (in ordine): `2019`, `2020`e `2021`.
Dai al terzo elemento `th` l'attributo `class` con il valore `current`.
Lascia vuoto l'elemento `td`. Questo elemento esiste solo per garantire che la tabella abbia un layout a quattro colonne e associare le intestazioni alle colonne corrette.
# --hints--
Ognuno degli elementi `th` dovrebbe avere un elemento `span`.
```js
const ths = [...document.querySelectorAll('th')];
ths?.forEach(th => {
assert(th?.children?.length === 1);
assert(th?.children?.[0]?.localName === 'span');
});
```
Ognuno dei nuovi elementi `span` dovrebbe avere l'attributo `class` con il valore `sr-only year`.
```js
const ths = [...document.querySelectorAll('th')];
ths?.forEach(th => {
assert(th?.children?.[0]?.classList?.contains('sr-only'));
assert(th?.children?.[0]?.classList?.contains('year'));
});
```
Il primo elemento `span` dovrebbe avere il testo `2019`.
```js
assert(document.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
```
Il secondo elemento `span` dovrebbe avere il testo `2020`.
```js
assert(document.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
```
Il terzo elemento `span` dovrebbe avere il testo `2021`.
```js
assert(document.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
```
Il terzo elemento `th` dovrebbe avere l'attributo `class` con il valore `current`.
```js
assert(document.querySelector('table')?.querySelectorAll('th')?.[2]?.classList?.contains('current'));
```
L'elemento `td` dovrebbe essere vuoto.
```js
assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.textContent === '');
assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.children?.length === 0);
```
# --seed--
## --seed-contents--
```html
Balance Sheet