Passo 8

Instruções

Agora que você redefiniu o modelo de caixa html, você precisa aplicar isso aos elementos dentro dele também. Para fazer isso, você precisará definir a propriedade box-sizing de todos os outros elementos para ser herdada, o que garante que os elementos alvo adotem o mesmo valor que seu elemento pai. Você também precisará apontar para os pseudoelementos, que são palavras-chave especiais que seguem um seletor. Os dois pseudoelementos que você usará são ::before e ::after. ::before cria um pseudoelemento que é o primeiro filho do elemento selecionado, enquanto ::after cria um pseudoelemento que é o último filho do elemento selecionado. Esses pseudoelementos são muitas vezes usados para criar conteúdo estético, algo que você verá mais tarde neste projeto. Por enquanto, crie um seletor CSS para direcionar todos os elementos usando * e inclua os pseudo-elementos ::before e ::after. Defina a propriedade box-sizing para inherit.

O que fazer:

Testes:

Você deve ter um seletor `html`.
O seletor `html` deve ter a propriedade `box-sizing` com o valor de `border-box`.
Você deve ter um seletor `*, ::before, ::after`.
O seletor `*, ::before, ::after` deve ter a propriedade `box-sizing` definida como `inherit`.

<!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>

html {
  box-sizing: border-box;
}

Preview