nth-child and nth-last-child Pseudo-Classes in CSS

The :nth-child and :nth-last-child pseudo-classes in CSS are powerful selectors that allow you to target and style elements based on their position within their parent container. These pseudo-classes use mathematical formulas to select elements by their ordinal numbers in relation to their siblings.

:nth-child()

The :nth-child pseudo-class allows you to select elements based on their position among all their sibling elements within the parent container. You specify a formula inside the parentheses, and the formula determines which elements are selected.

The formula follows the pattern an + b, where a and b are integers. The n represents the position of the element in question, starting from 1 for the first child. The formula selects elements for which an + b equals an integer value.

:nth-last-child()

The :nth-last-child pseudo-class is similar to :nth-child, but it selects elements based on their position counting from the end of their parent container.

Like :nth-child, you use a formula with an + b to specify which elements are selected based on their position from the end.

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Structural Pseudo-classes</title>
    <style>
      /*
        li:nth-child(2) {
          color: blue;
        }
      */
      /*
      n->0,1,2......
      2n 
        2*0=0
        2*1=2
        2*2=4
        2*3=6
      3n
        3*0=0
        3*1=3
        3*2=6

      2n+1
        2*0+1=1
        2*1+1=3
        2*2+1=5
*/
      /*
      li:nth-child(odd) {
        color: blue;
      }
      li:nth-child(even) {
        color: red;
      }
      p:nth-child(odd) {
        color: red;
      }
      */

      li:nth-last-child(1) {
        color: red;
      }
      p:nth-last-child(1) {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Structural Pseudo-classes</h1>
    <h3>:nth-child() :nth-last-child()</h3>
    <ul>
      <li>Apple</li>
      <li>Orange</li>
      <li>Pineapple</li>
      <li>Banana</li>
      <li>Mango</li>
      <li>Watermelon</li>
      <li>Papaya</li>
    </ul>
    <p>P-1 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro laborum, rerum illo id molestiae aliquid.</p>
    <p>P-2 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro laborum, rerum illo id molestiae aliquid.</p>
    <p>P-3 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro laborum, rerum illo id molestiae aliquid.</p>
    <ul>
      <li>Pencil</li>
      <li>Pen</li>
      <li>Eraser</li>
      <li>Book</li>
      <li>Ball</li>
      <li>Stabler</li>
      <li>Box</li>
      <li>Compass</li>
    </ul>
    <div>
      <p>P-1 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro laborum, rerum illo id molestiae aliquid.</p>
      <p>P-2 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro laborum, rerum illo id molestiae aliquid.</p>
      <p>P-3 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro laborum, rerum illo id molestiae aliquid.</p>
    </div>
  </body>
</html>

Live Preview

li:nth-child(odd):
- This selector targets all odd-numbered <li> elements within their parent container.
- color: blue; sets the text color of odd-numbered <li> elements to blue.
li:nth-child(even):
- This selector targets all even-numbered <li> elements within their parent container.
- color: red; sets the text color of even-numbered <li> elements to red.
li:nth-last-child(1):
- This selector targets the last <li> element within its parent container.
- color: red; sets the text color of the last <li> element to red.
p:nth-last-child(1):
- This selector targets the last <p> element within its parent container.
- color: red; sets the text color of the last <p> element to red.

In summary, this code applies different text colors to elements based on their position within their parent containers

Odd-numbered <li> elements are styled with blue text.
Even-numbered <li> elements are styled with red text.
The last <li> element is styled with red text.
The last <p> element is also styled with red text.

It's important to note that the :nth-child and :nth-last-child pseudo-classes provide a flexible way to style elements based on their positions, making it possible to create alternating styles, highlight specific elements, or target elements at the beginning or end of a list or container.

These pseudo-classes are highly flexible and can be used for various styling purposes. They are often used to create alternate row styles in tables, style elements in repeating patterns, or target specific elements within a layout grid. By understanding and using :nth-child and :nth-last-child, you can achieve precise and dynamic element styling based on their positions in the document structure.