This translation is incomplete. Please help translate this article from English.

La pseudo-class CSS :only-child representa un element sense germans. És el mateix que :first-child:last-child o :nth-child(1):nth-last-child(1), però amb una menor especificitat.

/* Selecciona cada <p>, però només si és l'únic fill del seu pare */
p:only-child {
  background-color: lime;
}

Nota: Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels Selectores Nivell 4, això ja no és necessari.

Sintaxi

:only-child

Exemples

Exemple bàsic

HTML

<main>
  <div>
    <i>I am a lonely only child.</i>
  </div>

  <div>
    <i>I have siblings.</i><br>
    <b>So do I!</b><br>
    <span>I also have siblings, <span>but this is an only child.</span></span>
  </div>
</main>

CSS

main :only-child {
  color: red;
}

Resultat

Un exemple de llista

HTML

<ol>
  <li>First
    <ul>
      <li>This list has just one element.
    </ul>
  </li>
  <li>Second
    <ul>
      <li>This list has three elements.
      <li>This list has three elements.
      <li>This list has three elements.
    </ul>
  </li>
<ol>

CSS

li li {
  list-style-type: disc;
}
li:only-child {
  color: red;
  list-style-type: square;
}

Resultat

Especificacions

Especificació Estat Comentari
Selectors Level 4
The definition of ':only-child' in that specification.
Working Draft No es requereix que els elements coincidents tinguin un pare.
Selectors Level 3
The definition of ':only-child' in that specification.
Recommendation Definició inicial.
Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 2 (Yes) 1.5 (1.8) 9 9.5 3.1
No es requereix cap pare 57 ? ? ? 44 ?
Descripció Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic (Yes) (Yes) (Yes) 1.0 (1.8) 9 10 3.1
No es requereix cap pare 57 57 ? ? ? 44 ?

Vegeu també

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,