Nth-child selector in CSS3

How to select a specific child of the parent element in CSS3?

By using nth-child selector we can select a specific child of the parent element.

<style>
        p:nth-child(3) {
            background-color: lightblue;
            color: blue;
        }
</style>

<body>
    <p>The first Child.</p>
    <p>The second Child.</p>
    <p>The third Child.</p>
    <p>The fourth Child.</p>
</body>

In the above code snippet we have given 3rd child as a nth child, so the nth-child selector selects the 3rd child as a nth child and applies style to the 3rd child. That is shown clearly in the below output.

OUTPUT

Views: 3797 | Post Order: 22

CSS3 > Selectors

Nth-child selector in CSS3

How to select a specific child of the parent element in CSS3?

Related Posts

Utility Tools