Question 293677 in Html Question posted in
Some basic documentation can be found here.

Why does the 'p:nth-child(1)' not work in my html?

When I used p:nth-child(1){color: white;} in my stylesheet it didn’t work.

I was expecting the first p tag to be white but it was black.
the tags in the html document was in this order: p, div, form, div, p. I also used a class attribute in the p tags

I was wondering could the div tag have caused it.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I realized adding a <br /> tag before the <p> tag in the HTML was the problem but why?


  2. 0

    It’s possible that the div tag is causing the issue. The :nth-child() selector selects the nth child of its parent element, regardless of its type. In your case, if the div tags are the first child elements of their parent, then they will be selected instead of the p tags.

    To fix this issue, you can try using the :first-of-type selector instead of :nth-child(1). This selector selects the first child element of its type** within its parent element. Here’s an example:

    div p:first-of-type {
  color: white;
}

    This will select the first p element that is a child of a div element and set its color to white.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search