---
id: 615f4172e9eec061d6456221
title: الخطوة 19
challengeType: 0
dashedName: step-19
---

# --description--

تحتوي ملصقات التغذية على الكثير من النصوص الـ bold للفت الانتباه إلى المعلومات المهمة. بدلاً من استهداف كل عنصر يحتاج إلى أن يكون bold، من الأكثر كفاءة استخدام class لتطبيق النمط bold على كل عنصر.

أعطِ العنصر `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;
}
```
