Clash Royale CLAN TAG#URR8PPP

Why is CSS descendant not recognize?

Why is descendant p not red in this case?

h2 p
color: red;


<h2>h2
<h3>h3</h3>
<p>p</p>
</h2>

Did you write it exactly like that in your html file? Or is the css part in a css file?
– Geshode
8 hours ago

css is in external file.
– Django102
8 hours ago

Seems like it doesn't recognize <p> as a descendant of <h2>, because you have <h3> in it. At least it worked fine for me, when taking out the <h3> tags. But if you want to keep the <h3> tags, then it might be easier to get it to red via an id.
– Geshode
7 hours ago

<p>

<h2>

<h3>

<h3>

<h3>

you shouldn't nest content in a header tag, thats what divs are for.
– bitwitch
7 hours ago

Maybe because only phrasing content is permitted inside heading tags.
– Nima
7 hours ago

4 Answers
4

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.

<p>

This is not the reason. <p> is not phrasing content, yet without the <h3> element, the p will be coloured red.
– Alohci
2 hours ago

<p>

<h3>

This answer does not makes sense.
– Django102
18 mins ago

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:

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

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.

p

h2

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.

p

h3

h3

h2

h2 p
color: red;


<h2>h2
<p>p</p>
<h3>h3</h3>
</h2>

^{1 : still didn't find the correct entry with the specification for such behavior. Will add it when I found it}

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

You can add a class to your p and select it from CSS by the class.

p

.red
color: red;


<h2>
h2
<h3>h3</h3>
<p class="red">p</p>
</h2>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.