5

Why is descendant p not red in this case? 

h2 p {
  color: red;
}
<h2>h2
  <h3>h3</h3>
  <p>p</p>
</h2>
CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
Django102
  • 523
  • 1
  • 4
  • 8
  • Did you write it exactly like that in your html file? Or is the css part in a css file? – Geshode Jul 31 '18 at 01:04
  • css is in external file. – Django102 Jul 31 '18 at 01:05
  • 1
    Seems like it doesn't recognize `

    ` as a descendant of `

    `, because you have `

    ` in it. At least it worked fine for me, when taking out the `

    ` tags. But if you want to keep the `

    ` tags, then it might be easier to get it to red via an id.

     – Geshode Jul 31 '18 at 01:16
  • 1
    you shouldn't nest content in a header tag, thats what divs are for. – bitwitch Jul 31 '18 at 01:20
  • This is an function of the HTML parsing rules for heading elements, not their content model. – Alohci Jul 31 '18 at 07:17
  • @Alohci And you know where in the specification we can find that we aren't allowed to nest heading? ... I know we cannot do it but not able to find it explicitely written. – Temani Afif Jul 31 '18 at 09:07
  • 2
    @TemaniAfif - Where we aren't *allowed to* is the [headings content model](https://w3c.github.io/html/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements). Where the heading element parsing rules are defined is in the [in-body insertion mode](https://w3c.github.io/html/syntax.html#the-in-body-insertion-mode) : see A start tag whose tag name is one of: "h1", "h2", "h3", "h4", "h5", "h6". Note that is specifically says that a heading in a heading is a **parse error**, not merely a content model violation. – Alohci Jul 31 '18 at 09:29

3 Answers3

2

Update

I rephrase the answer to make it more clear.

First of all. No, you can't contain any tag inside header tag while expecting it running as usual.

In MDN, it is stated that

Permitted content Phrasing content.

What is phrasing content? Take a look on MDN doc again.

Simply speak it is those tag is only the text and the mark-up of text, <p> is not included. While for those included, CSS is not applicable.

That is why normally no element is added between heading element.

The reason why <p> is not in red can be shown by simple step.

  1. Use this JSfiddle or simply use the fiddle for OP in this page .
  2. Right click inspect the element of <p>
  3. Notice that the html parsed by browser will become the following.

As this

<h2> h2
</h2>
  <h3>h3</h3>
  <p>p</p>
  1. And then in this JSfiddle, still right click and inspect element <p>.
  2. As you can dynamically alter the page element, Drag the <h3>h3<h3> on top of <p>p<p>.
  3. You will notice the element <p> can maintain its red color, which means CSS already does its work.

Therefore the problem is caused by browser parsing the <h2><h3></h3></h2> into <h2></h2><h3></h3>. That's why pre-set CSS cannot take effect.

Special added

As mentioned by @Alohci, if we use the DOM, sample in this JSfiddle

The result is the same as we manually drag h3 element on top of p element.

MT-FreeHK
  • 2,462
  • 1
  • 13
  • 29
  • 1
    This is not the reason. `

    ` is not phrasing content, yet without the `

    ` element, the p will be coloured red.

     – Alohci Jul 31 '18 at 07:00
  • 2
    This answer does not makes sense. – Django102 Jul 31 '18 at 08:47
  • @Alohci , yes, I am too arbitrary to said the problem caused by Phrasing content. Seems like it is just the problem from browser rendering. – MT-FreeHK Jul 31 '18 at 11:03
  • 2
    Not rendering, but parsing. i.e. it's part of the process of converting the HTML markup into the DOM document. This matters because it's entirely possible to put an h3 element before a p element, both inside an h2 element if you construct the arrangement through DOM methods e.g. createElement, appendChild, insertBefore. If you do, and use the styling from the question, the 'p' element's contents will render in red. – Alohci Jul 31 '18 at 12:42
  • @Alohci yes, it is parsing problem, I will change the misleading wording. Besides, using DOM to reconstruct the structure is just same as I mentioned -- "Next, drag the

    into the

    and put it on top of first

    .", making `h3` element possible to be placed inside `h2` and on top of `p`. `h2` is parsed as independent of `h3`, that is the reason why p is not red in usual way. I will rephrase the whole ans to make it more clear. If it is still problematic, I think you should provide a better ans.

     – MT-FreeHK Jul 31 '18 at 15:42
  • @TemaniAfif I agree that I explained in a messy way in last edit. See if this is more clear to read now. – MT-FreeHK Jul 31 '18 at 16:21
2

The reason is simple and somehow logical:

You are not allowed to nest heading elements

Simply becasue there is no logical reason for doing this. Headings obey to some rules in order to define the semantic of your web page and you broke one of it.

If you validate your code you will get an error like this:

enter image description here

Basically your browser is changing your HTML structure and you will have something like this:

enter image description here

As you can see your p element no more belong to the h2 thus it won't get colored. So the solution is to avoid nesting headings element.

As a side note, if the p is placed before h3 your code will work because the browser will break the structure when it will find the h3 and it will then immediately close the h2.

h2 p {
  color: red;
}
<h2>h2
  <p>p</p>
  <h3>h3</h3>
</h2>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
-4

many possible reasons :

  • you forget to put the css code into the right place or you not linking the stylesheet .. pb like that

  • order of css rules :

    p{ color: red;}
p{ color: black;}
/* Paragraphs will be black*/

  • do not make heading inside heading .. illogic

  • refresh the page maybe

Fakh Ri
  • 140
  • 2
  • 8