Why descendant selector in CSS3 doesn't work with h1?

Question

I used descendant selector and I declared the style process in the head section

In the HTML head:

<style>
  p h1 {
    color: blue;
    background-color: red;
  }
</style>

In the HTML body:

<p>
  <h1>
    I am Anik Islam
  </h1>
</p>

It didn't show blue colored letters and red colored background, it showed the default instead. What am I missing here?

Check this answer https://stackoverflow.com/a/15656988/11350283 — devcrp, May 22 '20 at 06:10
@devcrp thanks for trying to help me,but it's still not clear.I don't find the relevence — Anik Islam Pantha, May 22 '20 at 06:15
`is impossible to put a heading element inside a p element in HTML markup, not just formally but because browsers implicitly terminate an open p element when they encounter a heading` hope this helps. — Manjuboyz, May 22 '20 at 06:19

score 1 · Answer 1 · answered May 22 '20 at 06:46

1

Your HTML is malformed.

You can not place an h element inside a p element. Header tags should be separate block elements not nested within paragraph elements.

In addition, many web browsers will auto-close open <p> tags if another block element is encountered such as <h1>.

Chances are very high the browser is rendering your markup as...

<p>

</p>

<h1>
 I am Anik Islam
</h1>

</p>

Therefore there is no nesting taking place. So, consequently the CSS isn't seeing any nesting.

If you wish to nest elements, use div tags. or if you wish to style the h1 specifically, target it by adding a class or ID to it.

answered May 22 '20 at 06:46

Scott

"*many web browsers...*", they should all do this, it's part of [the specs](https://www.w3.org/TR/2011/WD-html5-20110113/tokenization.html#parsing-main-inbody) "***A start tag whose tag name is one of: "h1", "h2", "h3", "h4", "h5", "h6"** If the stack of open elements has a p element in button scope, then act as if an end tag with the tag name "p" had been seen*" – Kaiido May 22 '20 at 07:11
Agreed, but I can't be absolutely definitive unless I check *every possible* web browser `:)` – Scott May 22 '20 at 07:20

1 Answers1