:only-child


:only-child est une pseudo-classe représentant un élément qui a un élément parent, lequel n'a pas d'autre élément enfant... autrement dit, c'est un enfant unique. Ce serait la même chose que :first-child:last-child ou nth-child(1):nth-last-child(1) mais avec une spécificité moindre.

//CSS
div p:only-child {
    color: red;
}     

Par exemple, si nous emboîtons ainsi les paragraphes dans une <div> :

//HTML
<div>
  <p>This paragraph is the only child of its parent</p>
</div>

<div>
  <p>This paragraph is the first child of its parent</p>
  <p>This paragraph is the second child of its parent</p>
</div>

Maintenant, nous pouvons appliquer un style au <p> unique de notre première <div>. La <div> suivante et ses enfants n'auront pas ce style car le parent contient plus d'un enfant (les deux <p>).

//CSS
p:only-child {
  color:red;
}

Nous pourrions également mélanger des pseudo-classes additionnelles comme cet exemple qui sélectionne le premier paragraphe à l'intérieur de notre <div> imbriquée et l':only-child de div.contain.

//HTML
<div class="contain">
  <div>
    <p>Hello World</p>
    <p>some more children</p>
  </div>
</div>


//CSS
div.contain div:only-child :first-child {
  color: red;
}

:only-child ne fonctionnera pas comme sélecteur si votre élément parent contient plus d'un enfant ayant la même balise, par exemple :

//HTML
<div class="contain">
  <div>
    <h1>Div Child 1</h1>
    <p>paragraph1</p>
    <p>paragraph2</p>
  </div>

  <div>
    <h1>Div Child 2</h1>
    <p>paragraph1</p>
    <p>paragraph2</p>
  </div>

  <div>
    <h1>Div Child 3</h1>
    <p>paragraph1</p>
    <p>paragraph2</p>
  </div>
</div>


//CSS
div.contain div:only-child {
  color: red;
}

Ici, aucune div n'héritera de la couleur rouge car le parent contient plus d'un enfant (les 3 div non nommées).


À lire également dans La Cascade :

Toi seul : utiliser only-child de CSS, par Dudley Storey
Quantity queries pour CSS, de Heydon Pickering

Autres ressources à consulter sur ce sujet :


Cet article est pour l’essentiel tiré de l’almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l’auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l’auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d’une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d’articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C’est aussi une source d'inspiration pour vos propres designs.