4

Tenho o seguinte código bem simples

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    
    p#father {
        color: red;
    }

    p#child {
        color: inherit;
    }
    
    </style>
</head>
<body>
    
<p id="father">
    pai
    <p id="child">
        filho
        <p id="child2">
            filho 2
        </p>
    </p>
</p>

</body>
</html>

O que acontece é que era para a tag com id#child herdar o color: red do parágrafo id#father. E não acontece, Por que ?

2 Respostas 2

6

Sua sintaxe está incorreta, você não pode ter um parágrafo <p>dentro de outro parágrafo.

Se você alterar os filhos para um elemento permitido (dentro da tag <p>) como por exemplo um <span> Você verá que os filhos herdarão automaticamente a cor do pai.

E caso você deseje trocar a cor de algum filho basta aplicar o css somente no filho desejado. Veja:

#father {
  color: red;
}

#child2 {
  color: green;
}
<p id="father" style="color:red">
    pai
    <span id="child">
        filho
        <span id="child2">
            filho 2
        </span>
    </span>
</p>

2
  • Vim postar a resposta e vc já tinha colocar exatamente o que eu iria colocar +1
    – hugocsl
    6/06/2019 às 15:39
  • 1
    Opa, valeu colega 6/06/2019 às 21:58
6

O problema é que o Browser corrige seu código. Assim como o Vinicius falou, não é adequado colocar um <p> dentro de outro. Quando vc faz isso o motor de renderização do browser faz isso com seu código

inserir a descrição da imagem aqui

Sendo assim, com o browser fechando automaticamente seus <p> quando vc coloca inherit na verdade ele herda a cor do body e não do pai, pois ele não tem pai!

OBS: Esse comportamento pode mudar de browser para browser.

O FireFox tb fecha os <p> automaticamente e não renderiza um <p> dentro de outro...

inserir a descrição da imagem aqui

OBS2: No HTML5 a tag <p> não precisa de uma tag de fechamento </p>, apesar disso recomendo que use...

inserir a descrição da imagem aqui

Fonte: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

3
  • 2
    Obrigado, hugocsl não sabia disso dos browser. E cara tu ta em todo canto do stackoverflow ;) 6/06/2019 às 21:58
  • @LeandroNascimento hahaha de acordo com a minha noiva "eu sou viciado nesse joguinho" rss. Mas compartilhar o conhecimento é muito bom, valeu a força!
    – hugocsl
    6/06/2019 às 22:03
  • 2
    👍😎 é isso ai, conhecimento é a chave para o futuro. O mundo se move e temos que se mover junto com ele hehehe. 6/06/2019 às 22:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .