W3docs
en
Log in

CSS :only-child Pseudo Class

Use the :only-child CSS pseudo-class for selecting and styling a parent’s only child. Read about the pseudo-class and Practice with examples.

The :only-child pseudo-class matches an element that is the only child of its parent — that is, an element with no siblings at all.

The element is selected only if its parent contains no other element children. The :only-child pseudo-class is functionally equivalent to :first-child:last-child (being both the first and the last child at once means there is nothing else in between), and it carries the same specificity of (0,2,0), since it counts as two pseudo-classes.

This page covers what :only-child matches, how it differs from related selectors like :only-of-type, how to use it in real layouts, and the gotchas that trip people up.

When to use :only-child

:only-child is most useful when you want an element to look different depending on whether it stands alone or sits among siblings. Common cases:

  • Lists with a single item. Style a one-item list differently (for example, hide a bullet or remove a separator that only makes sense when there are multiple items).
  • Card or grid layouts. A lone card can be centered or stretched, while two or more switch to a multi-column layout.
  • Generated content. When markup is produced by a CMS or a template loop, you often cannot know in advance how many siblings will appear; :only-child lets the stylesheet react to that automatically.

How it differs from :only-of-type

This is the most common point of confusion:

  • :only-child — matches only when the element is the single child of its parent, regardless of element type. If there is any other element sibling, it does not match.
  • :only-of-type — matches when the element is the only one of its type among its siblings, even if siblings of other types exist.
<div>
  <h2>Heading</h2>
  <p>Only paragraph here</p>
</div>

In the markup above, the <p> is not an :only-child (the <h2> is also a child), but it is :only-of-type, because it is the only <p>.

Text content does not count

:only-child looks only at element siblings. Plain text around an element does not stop it from matching:

<p>Some text <strong>bold</strong> more text</p>

Here <strong> still matches strong:only-child, because the surrounding text nodes are not elements. Whitespace and comments are likewise ignored.

Version

Selectors Level 4

Selectors Level 3

Syntax

CSS :only-child syntax

:only-child {
  css declarations;
}

Example of the :only-child selector:

:only-child example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:only-child {
        background: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:only-child selector example</h2>
    <div>
      <p>Lorem ipsum is simply dumnmy text.</p>
    </div>
    <div>
      <p>Lorem ipsum is simply dummy text.</p>
      <p>Lorem ipsum is simply dummy text.</p>
    </div>
  </body>
</html>
Try it Yourself »

Example of the :only-child selector for the <li> tag:

:only-child with li tag example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul li {
        list-style-type: square;
      }
      li:only-child {
        color: blue;
        list-style-type: disc;
      }
    </style>
  </head>
  <body>
    <h2>:only-child selector example</h2>
    <ol>
      <li>
        One element
        <ul>
          <li>This list has just one element.</li>
        </ul>
      </li>
      <li>
        Two elements
        <ul>
          <li>This list has two elements.</li>
          <li>This list has two elements.</li>
        </ul>
      </li>
      <li>
        Three elements
        <ul>
          <li>This list has three elements.</li>
          <li>This list has three elements.</li>
          <li>This list has three elements.</li>
        </ul>
      </li>
    </ol>
  </body>
</html>
Try it Yourself »

Example of the :only-child selector for the <em> tag:

:only-child with em tag example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      em:only-child {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:only-child selector example</h2>
    <p>This is a <em>paragraph</em>.</p>
    <p>This is a paragraph.</p>
  </body>
</html>
Try it Yourself »

Example of the :only-child selector for the <div> tag:

:only-child for the div tag example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div:only-child {
        color: #8ebf42;
        font-weight: bold;
      }
      div {
        display: block;
        margin: 6px;
        padding: 5px;
        outline: 1px solid #1c87c9;
      }
      div div {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h2>:only-child selector example</h2>
    <div>
      <div>I am an only child.</div>
    </div>
    <div>
      <div>I am the 1st sibling.</div>
      <div>I am the 2nd sibling.</div>
      <div>
        I am the 3rd sibling,
        <div>but this is an only child.</div>
      </div>
    </div>
  </body>
</html>
Try it Yourself »

Practice

Practice
The :only-child pseudo-selector matches an element
The :only-child pseudo-selector matches an element
Was this page helpful?