First and Last Child Pseudo-Classes in CSS

The :first-child and :last-child pseudo-classes in CSS are used to select and style elements based on their position within a parent element. These pseudo-classes target elements that are the first child and last child of their parent, respectively.

:first-child

The :first-child pseudo-class selects an element that is the first child of its parent. In other words, it targets an element that is the immediate sibling right after the start of its parent container.

This pseudo-class is helpful when you want to style the first occurrence of a particular element within a container, such as the first paragraph in a section or the first list item in an unordered list.

:last-child

The :last-child pseudo-class selects an element that is the last child of its parent. It targets an element that is the immediate sibling right before the end of its parent container.

Like :first-child, :last-child is useful for styling the last occurrence of a specific element within a container, such as the last list item in an ordered list or the final paragraph in a section.

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;
      }
      li:first-child {
        color: red;
      }
      p:first-child {
        color: red;
      }

      li:last-child {
        color: green;
      }
      p:last-child {
        color: green;
      }
    </style>
  </head>
  <body>
    <h1>Structural Pseudo-classes</h1>
    <h3>:first-child :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

The provided CSS code applies styles to the first and last children of different element types (<li> and ) within their respective parent containers.

li:first-child:
- This selector targets the first <li> element that is the first child of its parent container.
- color: red; sets the text color of the first <li> element to red.
p:first-child:
- This selector targets the first  element that is the first child of its parent container.
- color: red; sets the text color of the first  element to red.
li:last-child:
- This selector targets the last <li> element that is the last child of its parent container.
- color: green; sets the text color of the last <li> element to green.
p:last-child:
- This selector targets the last  element that is the last child of its parent container.
- color: green; sets the text color of the last  element to green.

In summary, this code separately styles the first and last children of two different types of elements (<li> and ) within their respective parent containers. If the first child is of the specified type, its text color is set to red, and if the last child is of the specified type, its text color is set to green. These styles will be applied to the specific elements that meet these criteria within their parent containers.

These pseudo-classes allow you to apply styles selectively to the first and last children of a parent container, providing fine-grained control over the appearance of your web page's content. They are particularly useful when you want to emphasize or differentiate the first and last elements within a container from the rest.