Use of :first-child

HTML & CSS
1

I am trying to select the first <p> child of a list item. If it is written as li <span></span> <p></p> <p></p> it won’t select the first p tag when the CSS says li p:first-child.

But if I code it as li <p> <span></span> </p> <p></p> it will select the <p> as the first-child.

Does this have to do with block vs inline status of the span vs. the p? thanks

3

No. first-child means just that: it has to be the first child, not the second!

So what you are really looking for is li p:first-of-type {} … as this selects the first instance of that type of element.

4

An aha moment. Got it. Thank you so much for the clarification.

1 Like