1

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!

1 Answer 1

0

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

The correct selector 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 use .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.

2
  • you're right. i misunderstood the documentation. i tought i was selecting contacts first child, which is the first paragraph by using .contacts:first-child. thank you!
    – agzo
    Oct 29, 2021 at 17:34
  • You're very welcome, glad I could help you on your road to better understanding of css! Have a great day and keep coding!
    – DrCord
    Oct 29, 2021 at 17:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.