:first-child and :nth-child(1) not working-CodePudding

I'm trying to select the first paragraph of the "contacts" address element using nth-child(1) or first-child selectors (.contacts:first-child), but it's not working :( if i create a class to the first paragraph and use a class css selector, it works normally. What am i missing?

<div class="address-col">
    <p class="footer-heading">Contact us</p>
       <address class="contacts">
         <p>23 Harrison St., 2nd Floor, San Francisco, CA 94107</p>
    
         <p>
            <a class="footer-link" href="tel:415-201-6370">415-201-6370</a><br/>
            <a class="footer-link" href="mailto:[email protected]">[email protected]</a>
         </p>
       </address>
</div>

Thanks in advance!

CodePudding user response：

from the spec: The :first-child CSS pseudo-class represents the first element among a group of sibling elements.

I believe the selector you want is .contacts p:first-child

If you wanted it to work only based on the container and not know or care what it contains you could try .contacts > *:first-child

When you use it as you are on the container what you are actually asking for via css is an element with the class .contacts that is the first child among it's sibling elements.