---
id: 612e89d254fe5d3df7d6693d
title: الخطوة 10
challengeType: 0
dashedName: step-10
---

# --description--

الآن بعد أن قمت بإعادة تعيين box model الـ `html`، تحتاج إلى تمرير ذلك إلى العناصر التي بالداخل أيضًا. للقيام بذلك، يمكنك تعيين خاصية `box-sizing` إلى `inherit`، والذي سيخبر العناصر المستهدفة باستخدام نفس القيمة التي يستخدمها العنصر الأصلي.

سوف تحتاج أيضًا إلى استهداف الـ pseudo-elements، التي هي كلمات مفتاحية خاصة تتبع منتقى. العنصران pseudo-elements اللتان ستستخدمهما هما `::before` و `::after`.

يقوم منتقي `::before` بإنشاء pseudo-element وهو أول child في العنصر المحدد، بينما يقوم منتقي `::after` بإنشاء pseudo-element وهو آخر child في العنصر المحدد. هذه الـ pseudo-elements غالبا ما تستخدم لإنشاء محتوى تجميلي، والذي ستراه لاحقا في هذا المشروع.

في الوقت الحالي، قم بإنشاء منتقي CSS لاستهداف جميع العناصر باستخدام `*`، وقم بتضمين pseudo-elements باستخدام `::before` و `::after`. قم بتعيين خاصية `box-sizing` إلى `inherit`.

# --hints--

يجب أن يكون لديك منتقي `*, ::before, ::after`.

```js
assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after'));
```

يجب أن يكون لمنتقي `*, ::before, ::after` الخاص بك الخاصية `box-sizing` بقيمة `inherit`.

```js
assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Piano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <div id="piano">
      <div class="keys">
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
      </div>
    </div>
  </body>
</html>
```

```css
--fcc-editable-region--
html {
  box-sizing: border-box;
}
--fcc-editable-region--
```
