ContextQMD
Back to Freecodecamp

Step 8

curriculum/challenges/english/blocks/workshop-piano/612e89d254fe5d3df7d6693d.md

latest2.9 KB
Original Source

--description--

Now that you've reset the html box model, you need to apply this to the elements inside it as well. To do this, you will need to set the box-sizing property of all other elements to be inherited, which ensures that the targeted elements adopt the same value as their parent element.

You will also need to target the pseudo-elements, which are special keywords that follow a selector. The two pseudo-elements you will be using are the ::before and ::after pseudo-elements.

The ::before selector creates a pseudo-element which is the first child of the selected element, while the ::after selector creates a pseudo-element which is the last child of the selected element. These pseudo-elements are often used to create cosmetic content, which you will see later in this project.

For now, create a CSS selector to target all elements using *, and include the pseudo-elements ::before and ::after. Set the box-sizing property to inherit.

--hints--

You should have an html selector`.

js
assert.exists(new __helpers.CSSHelp(document).getStyle('html'));

Your html selector should have the box-sizing property set to border-box.

js
assert.equal(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing, 'border-box');

You should have a *, ::before, ::after selector.

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

Your *, ::before, ::after selector should have the box-sizing property set to inherit.

js
assert.equal(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--