-1
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="chapter3.css">
    </head>
    <body>
        <h1 class="blue">
            <p>blue
                <h3>
                    green
                </h3>
            </p>
        </h1>
    </body>
</html>

Here's my .html file ^ and below is my CSS (chapter3.css) I do not understand why my h3 is not displaying as green, I've tried everything I can think of

.blue p {
    color: blue;
}

.blue p h3 {
    color: green;
}

output

Meester Moo
  • 17
  • 4

1 Answers1

2

It's because h3 cannot be inside h1. Only a few elements can be inside a header tag, such as a, em, strong, code, cite, span, br, img.

If you right click inspect in the browser, you will see that the browser has sorted it out.

<html>
  <head>
    <link rel="stylesheet" href="inherit.css">
  </head>
  <body>
     <h1 class="blue">
        <p>blue</p>
     </h1>
     <h3> green </h3>
     <p></p>
  </body>
</html>

Reference

Full Reference

Rohit Gupta
  • 4,022
  • 20
  • 31
  • 41
  • People, I am rejecting edits to this because this is what came from the browser window. It is a quote. It is not my layout !!!! – Rohit Gupta Jan 16 '23 at 01:51