:only-child

  • Revision slug: CSS/:only-child
  • Revision title: :only-child
  • Revision id: 386375
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

Revision Content

{{CSSRef}}

Summary

The :only-child CSS pseudo-class represents any element which is the only child of its parent. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.

Syntax

parent child:only-child {
  property: value;
} 

Examples

Basic example

span:only-child {
  color: red;
}
<div>
    <span>This span is the only child of its father</span>
</div>

<div>
    <span>This span is one of the two children of its father</span>
    <span>This span is one of the two children of its father</span>
</div> 

Reference result

This span is the only child of its father
This span is one of the two children of its father This span is one of the two children of its father
This span is the only child of its father
This span is one of the two children of its father This span is one of the two children of its father

A list example

li li {
  list-style-type: disc;
}
li:only-child {
  color: #6699ff;
  font-style: italic;
  list-style-type: square;
}
<ol>
    <li>First
        <ul>
            <li>This is only child element
        </ul>
    </li>
    <li>Second
        <ul>
            <li>This list has two elements
            <li>This list has two elements
        </ul>
    </li>
    <li>Third
        <ul>
            <li>This list has three elements
            <li>This list has three elements
            <li>This list has three elements
        </ul>
    </li>
<ol>
  1. First
    • This list has only one element
  2. Second
    • This list has two elements
    • This list has two elements
  3. Third
    • This list has three elements
    • This list has three elements
    • This list has three elements

p:only-child {
    background: #6699ff;
    width: 350px;
}
<div>
    <p>This is a paragraph with :only-child</p>
</div>

This is a paragraph with :only-child

Specifications

Specification Status Comment
{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}} {{Spec2('CSS4 Selectors')}} No change.
{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}} {{Spec2('CSS3 Selectors')}} Initial definition.

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 2 {{CompatGeckoDesktop(1.8)}} 9 9.5 3.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 {{CompatGeckoMobile(1.8)}} 9 10.0 3.1

 

Revision Source

<div>
  {{CSSRef}}</div>
<h2 id="Summary">Summary</h2>
<p>The <code>:only-child</code> CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> represents any element which is the only child of its parent. This is the same as <code>:first-child:last-child</code> or <code>:nth-child(1):nth-last-child(1)</code>, but with a lower specificity.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">
parent child:only-child {
  property: value;
} 
</pre>
<h2 id="Examples">Examples</h2>
<h3 id="Basic_example">Basic example</h3>
<pre class="brush: css">
span:only-child {
  color: red;
}
</pre>
<pre class="brush: html">
&lt;div&gt;
    &lt;span&gt;This span is the only child of its father&lt;/span&gt;
&lt;/div&gt;

&lt;div&gt;
    &lt;span&gt;This span is one of the two children of its father&lt;/span&gt;
    &lt;span&gt;This span is one of the two children of its father&lt;/span&gt;
&lt;/div&gt; 
</pre>
<h4 id="Reference_result">Reference result</h4>
<div>
  <span style="color:red;">This span is the only child of its father</span></div>
<div>
  <span>This span is one of the two children of its father</span><span> This span is one of the two children of its father</span></div>
<div class="example1">
  <span>This span is the only child of its father</span></div>
<div class="example1">
  <span>This span is one of the two children of its father</span> <span>This span is one of the two children of its father</span></div>
<h3 id="A_list_example">A list example</h3>
<pre class="brush: css">
li li {
  list-style-type: disc;
}
li:only-child {
  color: #6699ff;
  font-style: italic;
  list-style-type: square;
}</pre>
<pre class="brush: html">
&lt;ol&gt;
    &lt;li&gt;First
        &lt;ul&gt;
            &lt;li&gt;This is only child element
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Second
        &lt;ul&gt;
            &lt;li&gt;This list has two elements
            &lt;li&gt;This list has two elements
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Third
        &lt;ul&gt;
            &lt;li&gt;This list has three elements
            &lt;li&gt;This list has three elements
            &lt;li&gt;This list has three elements
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;ol&gt;
</pre>
<div>
  <ol>
    <li>First
      <ul>
        <li style="color:#6699ff;list-style-type: square;font-style:italic;">This list has only one element</li>
      </ul>
    </li>
    <li>Second
      <ul>
        <li>This list has two elements</li>
        <li>This list has two elements</li>
      </ul>
    </li>
    <li>Third
      <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>
</div>
<hr />
<pre class="brush: css">
p:only-child {
    background: #6699ff;
    width: 350px;
}</pre>
<pre class="brush: html">
&lt;div&gt;
    &lt;p&gt;This is a paragraph with :only-child&lt;/p&gt;
&lt;/div&gt;
</pre>
<div>
  <p style="background-color:#6699ff; width: 350px;">This is a paragraph with :only-child</p>
</div>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}</td>
      <td>{{Spec2('CSS4 Selectors')}}</td>
      <td>No change.</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}</td>
      <td>{{Spec2('CSS3 Selectors')}}</td>
      <td>Initial definition.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>
  {{CompatibilityTable}}</div>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>2</td>
        <td>{{CompatGeckoDesktop(1.8)}}</td>
        <td>9</td>
        <td>9.5</td>
        <td>3.1</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>2.1</td>
        <td>{{CompatGeckoMobile(1.8)}}</td>
        <td>9</td>
        <td>10.0</td>
        <td>3.1</td>
      </tr>
    </tbody>
  </table>
</div>
<p>&nbsp;</p>
Revert to this revision