Only Child Pseudo-Classes in CSS

:only-child

The "Only Child" pseudo-classes in CSS are a set of selectors that allow you to target and style elements that are the sole children of their parent container. These pseudo-classes help you identify and style elements that do not have any siblings of the same type within the same parent container.

The :only-child pseudo-class selects elements that are the only child of their parent container, meaning they have no sibling elements of the same type within that container.
This pseudo-class is useful when you want to apply styles to elements that are unique within their parent, such as applying styles to the only paragraph in a div or the only list item in an unordered list.

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:only-child {
        color: blue;
      }
      p:only-child {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Structural Pseudo-classes</h1>
    <h3>:only-child</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>
    </div>

    <ul>
      <li>Apple</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

The provided CSS code applies styles to <li> (list item) and <p> (paragraph) elements based on whether they are the only child within their respective parent containers.

li:only-child:

This selector targets <li> elements that are the only child within their parent container.

color: blue; sets the text color of these single <li> elements to blue.

p:only-child:

This selector targets <p> elements that are the only child within their parent container.

color: blue; sets the text color of these single <p> elements to blue.

Using "Only Child" pseudo-classes is particularly helpful for creating specific and targeted styling within your web page layout. They allow you to differentiate and style elements that are unique within their parent containers, improving the visual hierarchy and design of your website.