Pseudo-Class - :nth-last-child()

Pattern:

:nth-last-child(Nth)

The argument Nth is of the following format:

  • ODD

Odd numbers, the same signification as 2n+1

  • EVEN

​​Even, the same as 2n

  • [-|+]?[0-9]+

E.g., 0, 6, +7

  • [-|+]?[0-9]+N[[-|+]?[0-9]+]?

E.g., 5n, 2n+1, -2n+1

 

Definition:

The :nth-last-child(Nth) pseudo-class represents every element that is the Nth child of its parent element, counting backward from the last child.

 

Examples:

Style the last 3 <p> elements in their parent element

p:nth-last-child(-n+3) { background-color: cornflowerblue; }

 

Style every <img> element that is the 6th child of its parent element counting from the last one

img:nth-last-child(6) { border: 1px solid lightpink; }
w10schools
2014-11-13 07:45:01
Comments
Leave a Comment

Please login to continue.