2

CSS Pseudo Class selector(first-child) for p tag applies to all p that are immediate first child to their parent why not p tag that is immediate first element of p itself.

p:first-child {
  color: blue;
}
<body>
    <p>This P is body's first Child.</p>
    <p>This is body's second child.</p>

    <div>
        <p> This P is div's first Child </p>
        <p> This is div's second child.</p>
    </div>

    <p>
        <p> This P is P's first child :: Why it does not get pseudo class</p>
        <p> This is P's second child </p>
    </p>

</body>
Libra
  • 2,544
  • 1
  • 8
  • 24
srajput
  • 55
  • 7
  • 4
    Nested paragraphs are invalid HTML. Virtually every browser will attempt to fix that and change your code to `

    This P is P's first child :: Why it does not get pseudo class

    This is P's second child

    `     – j08691 Nov 21 '19 at 17:41

1 Answers1

5

<p> tags cannot be nested in HTML. This is because they only exist to format text as.. well.. a paragraph, you can read more about it here.

In short, any open <p> tag simply closes whatever the last <p> to be opened was, regardless of syntax.

Libra
  • 2,544
  • 1
  • 8
  • 24