Why doesn’t the tag inherit your father’s color?

Question

Why doesn’t the tag inherit your father’s color?

Asked 5 years ago

Viewed 108 times

4

I have the following very simple code

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

What happens is it was for the tag with id#child inherit the color: red of the paragraph id#father. And it doesn’t, because ?

2 answers

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Vinicius.Silva • **1,257** points · Answer 1 · 2019-06-06T15:38:27+00:00

Your syntax is incorrect, you cannot have a paragraph within another paragraph.

If you change the children to an allowed element (within the tag ) such as a  You will see that the children will automatically inherit their father’s color.

And if you want to change the color of a child just apply the css only to the desired child. See:

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

by hugocsl • **65,517** points · Answer 2 · 2019-06-06T15:43:49+00:00

The problem is that the Browser fixes your code. Just as Vinicius said, it is not appropriate to put a  within another. When vc does this the browser rendering engine does this with your code

So, with the browser automatically shutting down your  when you put inherit in fact he inherits the color of body and not from his father, for he has no father!

OBS: This behavior can change from browser to browser.

The Firefox also closes the  automatically and does not render a  within another...

OBS2: In HTML5 the tag  does not need a closing tag , although I recommend using...

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

Why doesn’t the <p> tag inherit your father’s color?

2 answers