---
id: 63ee3ff1381756f9716727f2
title: Fondamenti di CSS Esercizio D
challengeType: 14
dashedName: css-foundations-exercise-d
---

# --description--

Con questo esercizio, ti abbiamo fornito un file HTML completo, quindi dovrai solo modificare il file CSS. Per questo esercizio, è più importante capire come concatenare selettori diversi piuttosto che come aggiungere effettivamente gli attributi.

1. Dovresti vedere una `width` di `300px` sulle classi `avatar` e `proportioned`.
1. Dovresti fornire un'altezza in modo che mantenga le sue proporzioni quadrate originali (non esplicitare un valore in pixel per l'altezza!).
1. Dovresti dare agli elementi con entrambe le classi `avatar` e `distorted` una `width` di `200px`.
1. Dovresti dar loro una `height` doppia rispetto alla larghezza.

# --hints--

Dovresti avere una `width` di `300px` sulle classi `avatar` e `proportioned`.

```js
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`);
assert(style?.width === '300px');
```

Dovresti avere un'altezza di `auto` sulle classi `avatar` e `proportioned`.

```js
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`)
assert(style?.height === 'auto');
```

Dovresti usare un selettore concatenato sulle classi `avatar` e `proportioned`.

```js
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.proportioned`) || new __helpers.CSSHelp(document).getStyle(`.proportioned.avatar`);
assert(style);
```

Dovresti avere una `width` di `200px` sulle classi `avatar` e `distorted`.

```js
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
assert(style?.width === '200px');
```

Dovresti usare un selettore concatenato sulle classi `avatar` e `distorted`.

```js
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
assert(style);
```

Dovresti avere una `height` del doppio della larghezza sulle classi `avatar` e `distorted`.

```js
const style = new __helpers.CSSHelp(document).getStyle(`.avatar.distorted`) || new __helpers.CSSHelp(document).getStyle(`.distorted.avatar`);
assert(style?.height === '400px');
```

# --seed--

## --seed-contents--

```css

```

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Chaining Selectors</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Use the classes BELOW this line -->
    <div>
      <img class="avatar proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
      <img class="avatar distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg" alt="Man with surprised expression">
    </div>
    <!-- Use the classes ABOVE this line -->
    <div>
      <img class="original proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
      <img class="original distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg">
    </div>
  </body>
</html>
```

```css

```

# --solutions--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Chaining Selectors</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Use the classes BELOW this line -->
    <div>
      <img class="avatar proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
      <img class="avatar distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg" alt="Man with surprised expression">
    </div>
    <!-- Use the classes ABOVE this line -->
    <div>
      <img class="original proportioned" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_1.jpg" alt="Woman with glasses">
      <img class="original distorted" src="https://cdn.freecodecamp.org/curriculum/odin-project/css-foundations-exercise-D/cat_2.jpg">
    </div>
  </body>
</html>
```

```css
.avatar.proportioned {
  height: auto;
  width: 300px;
}

.avatar.distorted {
  height: 400px;
  width: 200px;
}
```

