Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Efeito Cascata - Não entendi

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Melhorando o CSS e atividade Aplicando gradientes

por Daniel Silveira
| 45.6k xp | 14 posts

Boa tarde pessoal! Tudo bem?

Estava exercitando o degradê e não entendi o seguinte: Por quê o elemento p, da primeira <div> pega o CSS aplicado somente na segunda <div>?

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="gradient__one">
        <h1>Gradient</h1>
        <p>
          background: linear-gradient(90deg, orange, blue);
        </p>
      </div>
      <div class="gradient__two">
        <h2>Gradient</h2>
        <p>
          background: linear-gradient(90deg, orange 50%, blue, black);
        </p>  
      </div>
</body>
</html>

CSS

.gradient__one {
    height: 25vh;
    background: linear-gradient(90deg, orange, blue);

    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
  }
  .gradient__one h1, p {
    margin: 0;
  }

  .gradient__two {
    height: 25vh;
    background: linear-gradient(90deg, orange 50%, blue, black);

    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;

  }
  .gradient__two h2, p {
    margin: 0;
    background: linear-gradient(#cccccc, #E1E1); 
    padding: 3px 10px;
    border-radius:3px;
  }
2 respostas
solução!
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Daniel, tudo bem?

Quando queremos dar estilo ao filho direto de uma classe, utilizamos o seletor >, ele vai criar uma relação direta entre a classe e o filho direto dela, então, ficaria assim:

 .gradient__one > p {
    margin: 0;
    color: blue; /*utilizei essa propriedade para mostrar de exemplo*/
  }

 .gradient__two > p  {
    margin: 0;
    background: linear-gradient(#cccccc, #E1E1); 
    padding: 3px 10px;
    border-radius:3px;
    color: red; /*utilizei essa propriedade para mostrar de exemplo*/
  }

Seria isso: pega o filho de direto da classe gradient__two e aplica em p esses estilos aqui

Se ficou alguma dúvida é só falar!

por Daniel Silveira
| 45.6k xp | 14 posts

Oi Laís! Tudo bem sim!Então, eu poderia selecionar os dois filhos direto desta forma?Ou precisa ser separado?

.gradient__two > h2, p  {
    margin: 0;
    background: linear-gradient(#cccccc, #E1E1); 
    padding: 3px 10px;
    border-radius:3px;
    color: red; 
  }