mozilla

Revision 35220 of :only-child

  • Revision slug: CSS/:only-child
  • Revision title: :only-child
  • Revision id: 35220
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment no changes

Revision Content

{{ CSSRef() }}

Summary

The :only-child 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

Live example <style type="text/css"></style>

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;
}
em {
    background-clor: #cccccc;
}
em:only-child {
    background-color: #6699f;
}
<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;
}
<ol>
    <p>
    This is a paragraph with :only-child
</p>

This is a paragraph with :only-child

Specifications

Specification Status Comment
CSS Selectors Level 3 {{ Spec2('CSS3 Selectors') }}  

Browser compatibility

{{ CompatibilityTable() }}

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

{{ languages( { "fr": "fr/CSS/:only-child" }) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>:only-child</code> <a href="/en/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>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><h4 id="Live_example_&lt;![CDATA[.example1_span:only-child_{___color:red;}
	]]>
">Live example <style type="text/css"><![CDATA[.example1 span:only-child {   color:red;}
	]]></style>
</h4>
<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;
}
em {
    background-clor: #cccccc;
}
em:only-child {
    background-color: #6699f;
}
</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;ol&gt;
    &lt;p&gt;
    This is a paragraph with :only-child
&lt;/p&gt;
</pre>
<div class="eval"> <p style="background-color:#6699ff; width: 350px;">This is a paragraph with :only-child</p>
</div><h2 id="Specifications" name="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><a class="external" href="http://www.w3.org/TR/css3-selectors/#only-child-pseudo" title="http://www.w3.org/TR/css3-selectors/#only-child-pseudo">CSS Selectors Level 3</a></td> <td>{{ Spec2('CSS3 Selectors') }}</td> <td> </td> </tr> </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<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") }}</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") }}</td> <td>9</td> <td>10.0</td> <td>3.1</td> </tr> </tbody> </table>
</div>
<p>{{ languages( { "fr": "fr/CSS/:only-child" }) }}</p>
Revert to this revision