CSS pseudo-class - :nth-last-child()

Quiz

CSS :nth-last-child() pseudo-class matches elements based on their position among a group of siblings, counting from the end.

Syntax

:nth-last-child(<nth> [of <complex-selector-list>]?) {
   /* ... */
}

Possible Values

odd − This value represents all odd-numbered (such as, 1,3,5..etc) sibling elements in a series counting from the end.
even − This value represents all even-numbered (such as, 2,4,6...etc) sibling elements in a series counting from the end.
functional notation (<an+b>) − This value represents every an+b-th child element in a series counting from the end of its parent container, where a is a positive integer, and n is a counter variable that starts from 0. b is another positive integer.

Following table describes a list of CSS selectors and their descriptions:

Selector	Description
tr:nth-last-child(odd) or tr:nth-last-child(2n+1)	Represents all odd rows in an HTML table.
tr:nth-last-child(even) or tr:nth-last-child(2n)	Represents all even rows in an HTML table.
:nth-last-child(6)	Represents the sixth element, counting from the end..
:nth-last-child(5n)	Represents every fifth element (5,10,15 etc), counting from the end.
:nth-last-child(3n+4)	Represents elements 4, 7, 10, 13, etc., counting from the end.
:nth-last-child(-n+2)	Represents last two elements among a group of siblings.
p:nth-last-child(n) or p:nth-last-child(n+1)	Represents every <p> element among a group of siblings.
p:nth-last-child(1) or p:nth-last-child(0n+1)	Represents every <p> that is the first element among a group of siblings, counting from the end.

CSS :nth-last-child() - List Example

Here is an example of how to style the li elements in an ol list −

<html>
<head>
<style>
   li:nth-last-child(-n+1) {
      font-weight: bold;
      color: red;
   }
   li:nth-last-child(3n+4){
      background-color: pink;
   }
   li:nth-last-child(5n){
      font-weight: bold;
   }
</style>
</head>
<body>
   <p>Styling last item as bold and red color.</p>
   <p>Styling every third list item starting with the fourth list item from the last with a pink background.</p>
   <p>Styling fifth item from last as bold.</p>
   <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
   </ol>
</body>
</html>

CSS :nth-last-child() - Table Example

Here is an example how to style specific rows in a table −

<html>
<head>
<style>
   table {
      border: 3px solid black;
   }
   tr:nth-last-child(6) {
      font-weight: bold;
      color: blue;
   }
   tr:nth-last-child(odd)  {
      background-color: pink;
   }
   tr:nth-last-child(even)  {
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <p>Styling the heading of the table as bold and blue in color.</p>
   <p>Styling all odd-numbered rows from the end with a pink background color.</p>
   <p>Styling all even-numbered rows from the end with a greenyellow background color.</p>
   <table>
      <tr>
         <th>Names</th>
      </tr>
      <tr>
         <td>Jhon Sean</td>
      </tr>
      <tr>
         <td>Rocky Luis</td>
      </tr>
      <tr>
         <td>Oliver David</td>
      </tr>
      <tr>
         <td>Marry Alamnd</td>
      </tr>
      <tr>
         <td>Dora Ann</td>
      </tr>
   </table>
</body>
</html>

CSS :nth-last-child() - Paragraph Example

Here is an example of how to style the paragraphs −

<html>
<head>
<style>
   p:nth-last-child(n){
      color: red;
   }
   p:nth-last-child(1){
      color: blue;
   }
</style>
</head>
<body>
   <h3>Styled all paragraphs with red color.</h3>
   <h3>Sets the text color of the last paragraph to blue.</h3>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
   <p>It is a long established fact that a reader will be distracted by the readable content.</p>
   <p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
   <p>The standard chunk of Lorem Ipsum used since the 1500s</p>
</body>
</html>

CSS :nth-last-child() - <selector>

Syntax for the:nth-last-child() pseudo-class with the of <selector> element:

li:nth-last-child(even of .fruits) {
   /* Your styles here */
 }

Moving the selector li.fruits outside of the function will select all li elements that have the class fruits, regardless of their position in the list of children.

li.fruits: nth-last-child(-n + 3);

Here is an example of how to use :nth-last-child(even of .fruits) pseudo-class for specific items with class .fruits−

<html>
<head>
<style>
   ul {
      list-style-type: none;
   }
   li {
      display: inline-block;
      border: 3px solid black; 
      margin: 5px; 
      padding: 5px; 
   }
   .fruits {
      background-color: pink;
   }
   li:nth-last-child(1 of .fruits) {
      font-weight: bold;
      color: blue;
   }
</style>
</head>
<body>
   <h3>Styling list items with the class fruits to have a pink background.</h3>
   <h3>Counting from the last child, styling first child element of the fruits class.</h3>
   <ul>
      <li>Orange</li>
      <li>Apple</li>
      <li class="fruits">Mango</li>
      <li>Grapes</li>
      <li class="fruits">Banana</li>
      <li>Watermelon</li>
      <li class="fruits">Cheery</li>
      <li class="fruits">Pear</li>
   </ul>
</body>
</html>

Print Page