BodinglesTM - -   Bright Lightbulb Graphic Ideas   - -

Full Stack MERN Web Development

Child Pseudo Class Selector

Return to CSS Tags Index

    Common Uses
  • Select specific child elements, such as:
    • :first-child - target first child of parent element
    • :last-child - targets last child of parent element
    • :nth-child(n) - targets nth child of parent element
      • n can be number, formula, or keyword
    • :nth-last-child(n)
      • like :nth-child(n) but counts from last child
    When to Use
  • use :first-child - to style the first list/menu item
  • apply :last-child - to style the last list/grid item
  • utilize :nth-child(n) - for alternating row colors or repeating patterns
  • leverage :nth-last-child(n) - for end-based patterns, reverse alternates
    Take Note
  • May not work on older browsers
  • Use judiciously to avoid complexity
  • Combine with other selectors for precision
  • Position based - element type or content is irrelevant
  • :nth-child(n) and :nth-last-child(n)
    • can be a formula such as 2n+1, or
    • can be a keyword such as odd or even

Frequently Asked Questions

  • What is your return policy?

    We offer a 30-day return policy on all items.

  • How do I track my order?

    You can track your order using the tracking number provided in your confirmation email.

  • Do you ship internationally?

    Yes, we ship to over 50 countries worldwide.

  • How can I contact customer service?

    You can contact us through email, chat, or our toll-free number.

Back to Top