---
id: 612e89d254fe5d3df7d6693d
title: Hatua ya 10
challengeType: 0
dashedName: step-10
---

# --description--

Kwa kuwa sasa umeweka upya kielelezo cha kisanduku cha `html`, unahitaji kupitisha hiyo kwa vipengele vilivyomo pia. Ili kufanya hivyo, unaweza kuweka `box-sizing` kuwa `inherit`, ambayo itaambia vipengele vilivyolengwa kutumia thamani sawa na kipengele kikuu.

Utahitaji pia kulenga vipengele vya pseudo, ambavyo ni maneno makuu yanayofuata kichaguzi. Vipengele viwili vya pseudo utakavyokuwa ukitumia ni `::before` na `::after`.

Kichaguzi cha `::before` huunda kipengele cha pseudo ambacho ni mtoto wa kwanza wa kipengele kilichochaguliwa, huku kichaguzi cha `::after` huunda kipengele cha pseudo ambacho ni mtoto wa mwisho wa kipengele kilichochaguliwa. Vipengele hivi vya pseudo hutumiwa mara nyingi kuunda maudhui ya vipodozi, ambayo utaona baadaye katika mradi huu.

Kwa sasa, unda kichaguzi cha CSS ili kulenga vipengele vyote kwa `*`, na ujumuishe vipengele vya pseudo vilivyo na `::before` na `::after`. Weka sifa ya `box-sizing` kuwa `inherit`.

# --hints--

Unapaswa kuwa na kichaguzi vya `*, ::before, ::after`.

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

Kichaguzi chako cha `*, ::before, ::after` kinapaswa kuwa na sifa ya `box-sizing` iliyowekwa kuwa `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--
```
