There is a basic HTML structure with two paragraphs in the Body . Why, when I tried to refer to the first paragraph through the pseudo selector p:first-child , nothing happened, but p:nth-child(2) worked. After all, this is the first paragraph in the parent Body , why so?

 <!DOCTYPE html> <html> <head> <style> p:nth-child(2) { color:red; } </style> </head> <body> <p>Paragraph-1</p> <p>Paragraph-2</p> </body> </html>

  • Well, I do not know codepen.io/bustexz/pen/pyrBpe . Everything is working. And generally it’s not good to access global p , they may already be on the page, and your style is assigned to them. Add a class to your p.someClass:first-child { ... } and check - Vasily Barbashev
  • 2
    habrahabr.ru/post/119139 , the countdown comes from the header - soledar10
  • @ Vasily Barbashev Yes, I just studied pseudo-classes and faced this problem. In the case of p.someClass: first-child, I refer to all paragraphs with this class and first with my parents, right? That is, if I have several divs, there are many paragraphs in them, including a couple with this class, this selector will select every first paragraph with this class in each div (not just the first in div <, but the first with this class) - right? - Rumata
  • @ soledar10 Very interesting ... but in my head I don’t have p, except that in the css code in the style tag - and is it considered? PS I just noticed that I mistakenly used Header instead of Head, now I will double-check with Head. - Rumata
  • 2
    jsfiddle.net/by7jh5wd works, you just don’t need to insert html, body, head tags there html, body, head . They already exist, and you break the page structure with this - Vasily Barbashev

2 answers 2

wrapped your code in <div> and it worked

 <!DOCTYPE html> <html> <head> <style> p:first-child{ color:red; } </style> </head> <body> <div> <p>Paragraph-1</p> <p>Paragraph-2</p> </div> </body> </html>

  • Interesting! That is, the first-child in my example works in an offline editor, because there the entire HTML structure is created from scratch, it does not work in online services, because the additional head, body, style breaks the structure embedded in the service, but if you must save it , you can use this option, great! I just don’t understand why this works) - Rumata
  • Indeed, in this case, all the same “extra” tags are added for the online service. - Rumata

This does not work in a specific snippet, because if you look at the generated markup, you can see that the <style> was moved to the body and the first of p became really the second element inside the body .

 console.log(document.body.innerHTML); 
 <!DOCTYPE html> <html> <head> <style> p:nth-child(2) { color: red; } </style> </head> <body> <p>Paragraph-1</p> <p>Paragraph-2</p> </body> </html>

To fix, you can instead use first-of-type , or wrap the necessary elements in some container as in the next answer.

Or, as already indicated in the comments, do not insert the html, head, body tags into the markup, since they are still generated automatically, and the duplicate ones are simply removed. And use special fields in snippets for scripts, markup and css.

 console.log(document.body.innerHTML); 
 p:first-child { color: red; } 
 <p>Paragraph-1</p> <p>Paragraph-2</p>