:only-child

by

The :only-child CSS selector is used to style an element that is the sole child of its parent element. This means it has no siblings, whether they be other elements or text nodes.

Basic Usage

/* Style any element that is the only child of its parent */
:only-child {
  color: blue;
  font-weight: bold;
}

Example

<div>
  <p>This paragraph is the only child of the div.</p>
</div>

In this example, the <p> element will be styled with the specified properties because it’s the only child of the <div>.

Example with an image

<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
</div>

<div class="image-container">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>
.image-container img:only-child {
  border: 2px solid red;
  margin: 20px;
}

In this example:

  • The first .image-container has only one child, the <img> element.
  • The second .image-container has two child <img> elements.
  • The CSS selector .image-container img:only-child targets the <img> element that is the only child of its parent .image-container.
  • This targeted image will have a red border and a 20px margin.

This way, you can apply specific styles to single images within containers, making your layout more flexible and visually appealing.

More Complex Scenarios

You can combine the :only-child selector with other selectors to create more specific styles:

/* Style only the first `p` element that is the only child of a `div` */
div > p:first-child:only-child {
  background-color: yellow;
}

Practical Use Cases

Here are a few practical use cases for the :only-child selector:

  1. Styling unique elements:
    • For example, a single image within a container might be styled differently.
  2. Creating specific layouts:
    • You can use it to apply unique styles to elements that appear alone in certain contexts.
  3. Improving accessibility:
    • By styling unique elements, you can make them more visually distinct, potentially aiding users with visual impairments.

Remember

  • The :only-child selector targets the element itself, not its children.
  • It’s a powerful tool for creating targeted styles, but use it judiciously to avoid overly complex CSS.

By understanding the :only-child selector and its applications, you can create more precise and visually appealing web designs.