nth-of-type and nth-last-of-type Pseudo-Classes in CSS

The :nth-of-type() and :nth-last-of-type() pseudo-classes in CSS are similar to :nth-child() and :nth-last-child(), but they select elements based on their position among siblings of the same type within their parent container. These pseudo-classes offer more specificity when styling elements of a particular type.

:nth-of-type()

The :nth-of-type() pseudo-class allows you to select elements based on their position among siblings of the same type within their parent container

The formula for :nth-of-type() follows the pattern an + b, where a and b are integers, and n represents the position of the element of a specific type within the parent container.

:nth-last-of-type()

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

You still use the formula an + b, but it applies to elements of a specific type counted from the end of the parent container.

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>
      div {
        background-color: burlywood;
        padding: 10px;
      }
      /*
      p:nth-of-type(1) {
        color: red;
      }
      p:nth-of-type(3) {
        color: blue;
      }

      */
      p:nth-last-of-type(1) {
        color: red;
      }

      li:nth-last-of-type(2) {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Structural Pseudo-classes</h1>
    <h3>:nth-of-type() :nth-last-of-type()</h3>
    <p>P-1 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro laborum, rerum illo id molestiae aliquid.</p>

    <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>

    <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-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>
  </body>
</html>

Live Preview

p:nth-of-type(1):
- This selector targets the first  element within its parent container.
- color: red; sets the text color of the first  element to red.
p:nth-last-of-type(1):
- This selector targets the last  element within its parent container.
- color: red; sets the text color of the last  element to red.
li:nth-last-of-type(2):
- This selector targets the second-to-last <li> element within its parent container.
- color: red; sets the text color of the second-to-last <li> element to red.

In summary, this code applies a red text color to specific elements within their parent containers.

The first  element within its container is styled with red text.
The last  element within its container is also styled with red text.
The second-to-last <li> element within its container is styled with red text.

These styles are applied based on the elements' positions within their parent containers and are useful for targeting specific elements for styling or emphasis.

These pseudo-classes, :nth-of-type() and :nth-last-of-type(), are valuable when you want to apply styles to elements of a specific type within their parent containers based on their position. They offer precise control over element selection, allowing you to create sophisticated and dynamic designs.