:only-child

  • Raccourci de la révision : CSS/:only-child
  • Titre de la révision : :only-child
  • ID de la révision : 355157
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Résumé

La pseudo-classe CSS :only-child représente n'importe quel élément qui est le seul enfant de son élément parent. Réalise la même chose que :first-child:last-child ou :nth-child(1):nth-last-child(1), mais avec une spécificité moindre.

Syntaxe

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

Exemples

div span:only-child {
    color:red;
}
<div>
    <span>Un peu de texte en rouge</span>
</div>

<div>
    <span>Du texte classique</span>
    <span>Du texte classique</span>
</div> 

Résultat

Un peu de texte en rouge
Du texte classique Du texte classique

Spécifications

Specification État Commentaire
CSS Selectors Level 3 {{ Spec2('CSS3 Selectors') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 2 {{ CompatGeckoDesktop("1") }} 9 9.5 3.1
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base 2.1 {{ CompatGeckoMobile("1") }} 9 10.0 3.1

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

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La <a href="/fr/docs/CSS/Pseudo-classes" title="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>:only-child</code> représente n'importe quel élément qui est le seul enfant de son élément parent. Réalise la même chose que <code>:first-child:last-child</code> ou <code>:nth-child(1):nth-last-child(1)</code>, mais avec une spécificité moindre.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre>
parent child:only-child {
&nbsp;&nbsp;&nbsp; property:value;
} 
</pre>
<h2 id="Exemples">Exemples</h2>
<pre class="brush: css">
div span:only-child {
&nbsp;&nbsp;&nbsp; color:red;
}
</pre>
<pre class="brush: html">
&lt;div&gt;
&nbsp;&nbsp;&nbsp; &lt;span&gt;Un peu de texte en rouge&lt;/span&gt;
&lt;/div&gt;

&lt;div&gt;
&nbsp;&nbsp;&nbsp; &lt;span&gt;Du texte classique&lt;/span&gt;
&nbsp;&nbsp;&nbsp; &lt;span&gt;Du texte classique&lt;/span&gt;
&lt;/div&gt; 
</pre>
<h3 id="R.C3.A9sultat">Résultat</h3>
<div>
  <pre class="eval">
<span style="color:red;">Un peu de texte en rouge</span>
<span>Du texte classique</span> <span>Du texte classique</span>
</pre>
</div>
<h2 id="Specifications" name="Specifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">État</th>
      <th scope="col">Commentaire</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>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Support de base</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>Fonction</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</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( { "en": "en/CSS/:only-child" }) }}</p>
Revenir à cette révision