Home/ Questions/Q 7506697
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T22:20:03+00:00

Any idea why ‘li’ elements are not inheriting ‘p’ elements style in the following

  • 0

Any idea why ‘li’ elements are not inheriting ‘p’ elements style in the following snippets?
i.e ‘role1’ and ‘role2’ are rendering as black while ‘Hello world!’ and ‘Inside nested p’ are in blue.

<!DOCTYPE html>
<html>
    <title>test</title>
    <head>
        <style type="text/css">
        p {
            color: blue;
        }
        </style>
    </head>
    <body>
        <p>
            Hello World !
            <ol>
                <li>role1</li>
                <li>role2</li>
            </ol>
            <p>
                Inside nested p
            </p>
        </p>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The p tag can not contain block level elements.
    So the browser automaticaly closes the p tag for you.
    Your html will parse like this:

    <!DOCTYPE html>
<html>
    <title>test</title>
    <head>
        <style type="text/css">
        p {
            color: blue;
        }
        </style>
    </head>
    <body>
        <p>
            Hello World !
        </p>
            <ol>
                <li>role1</li>
                <li>role2</li>
            </ol>
            <p>
                Inside nested p
            </p>
    </body>
</html>

    And now you see why Hello world and Inside nested p are blue and the li elements are not

    • 0