why last paragraph is not coloured in the following HTML code?

Question

I'm learning HTML and CSS and I'm confused how nth-of-type work? On googling i got to know that it select nth element of the type specified.In the below code I want to style all the first paragraph but only above two paragraphs are getting styled.

<!DOCTYPE html>
<html>
<head>
    <title>selector</title>
    <style type="text/css">         
        p:nth-of-type(1){
            color: blue;
        }
    </style>

</head>
<body>
<h1>this is heading 1</h1>
<p>this is a paragraph 1</p>  //--> this is working

<div>
    <h2>this is heading 2</h2>
    <h2>this is the heading 3</h2>
    <p>this is paragraph 2</p>     //-->this is also working
</div>

<h3>this is heading 4
    <h4>this is heading 5</h4>
    <p>This is paragraph 3</p>     //-->Not working
</h3>


</body>
</html>

Because the HTML spec says so, and because it makes little structural sense. — deceze, Oct 24 '18 at 04:43
Remove `` and if first time is allready working then how it is work for second time — Ravi Chauhan, Oct 24 '18 at 04:43
Please at least make sure your HTML is valid: https://validator.w3.org. I'm inclined to close this as a typo problem. — deceze, Oct 24 '18 at 04:49

score 0 · Answer 1 · answered Oct 24 '18 at 04:42

0

I dont think you should put elements inside of a header tag like that, it's a different kind if tag than the others.

answered Oct 24 '18 at 04:42

Dan Chase

993
7
18

You can put lots of elements inside a header... – Mr Lister Oct 24 '18 at 10:50
Not so, HTML is a specification. – Dan Chase Oct 24 '18 at 23:06
Can you clarify? The [specification](https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements) says that you can put [phrasing content](https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2) inside h1 through h6 elements, – Mr Lister Oct 25 '18 at 06:07
Where is p in phrasing conte t? I could have missed it? Does it pass a validator? Ok I admit your comment said lots of, but I assumed you were talking about p..sorry for any confusion. – Dan Chase Oct 25 '18 at 06:20

score 0 · Answer 2 · edited Oct 24 '18 at 05:45

0

p:nth-of-type(1) {
  color: blue;
}

<!DOCTYPE html>
<html>
  <head>
    <title>selector</title>
  </head>
  <body>
    <h1>this is heading 1</h1>
    <p>this is a paragraph 1</p><!-- this is working -->
    <div>
      <h2>this is heading 2</h2>
      <h2>this is the heading 3</h2>
      <p>this is paragraph 2</p><!--this is also working -->
    </div>
    <div>
      <h3>this is heading 4</h3>
      <h4>this is heading 5</h4>
      <p>This is paragraph 3</p> <!--working now-->
    </div>
  </body>
</html>

edited Oct 24 '18 at 05:45

dcangulo

1,888
1
16
48

answered Oct 24 '18 at 04:42

Ravi Chauhan

1,409
13
26

But the question asked why it happened; you didn't address that. The OP already knew how to make it work - that's what they had in the second block. – Mr Lister Oct 24 '18 at 10:14

why last paragraph is not coloured in the following HTML code?

2 Answers2