---
id: 615f4172e9eec061d6456221
title: Крок 19
challengeType: 0
dashedName: step-19
---

# --description--

Етикетки мають багато жирного тексту, щоб привернути увагу до важливої інформації. Замість того, щоб націлювати кожен елемент, який повинен бути жирним, краще використати клас, щоб застосувати жирний стиль до всіх елементів.

Надайте вашому другому елементу `p` атрибут `class` зі значенням `bold`.

# --hints--

Ваш другий елемент `p` повинен мати атрибут `class` зі значенням `bold`.

```js
assert(document.querySelectorAll('p')?.[1]?.classList?.contains('bold'));
```

Ваш перший елемент `p` не повинен мати атрибут `class` зі значенням `bold`.

```js
assert(!document.querySelector('p')?.classList?.contains('bold'));
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
  <link href="./styles.css" rel="stylesheet">
</head>

<body>
--fcc-editable-region--
  <div class="label">
    <h1>Nutrition Facts</h1>
    <div class="divider"></div>
    <p>8 servings per container</p>
    <p>Serving size 2/3 cup (55g)</p>
  </div>
--fcc-editable-region--
</body>
</html>
```

```css
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.label {
  border: 2px solid black;
  width: 270px;
  margin: 20px auto;
  padding: 0 7px;
}

h1 {
  font-weight: 800;
  text-align: center;
  margin: -4px 0;
  letter-spacing: 0.15px;
}

p {
  margin: 0;
}

.divider {
  border-bottom: 1px solid #888989;
  margin: 2px 0;
}
```
