Nth-last-child selector in CSS3

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

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

<style>
        p:nth-last-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-last-child selector selects the 2nd child as a nth-last-child and applies style to the 2nd child. That is shown clearly in the below output.

It means that the counting of the element is done from the last (bottom of the page) so whatever paragraph element will come to the 3rd position that element will be selected and style will be applied.

OUTPUT

Views: 4008 | Post Order: 23

CSS3 > Selectors

Nth-last-child selector in CSS3

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

Related Posts

Utility Tools