MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

:only-child

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

Sumari

La pseudo-classe CSS :only-child representa qualsevol element que és l'únic fill del seu pare. Això és el mateix que :first-child:last-child or :nth-child(1):nth-last-child(1), però amb una menor especificitat.

Sintaxi

:only-child { style properties }

Exemples

Exemple senzill

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> 

Resultat

Exemple d'una llista

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>

Resultat

Especificacions

Especificació Estat Comentari
Selectors Level 4
The definition of ':only-child' in that specification.
Working Draft Sense canvis.
Selectors Level 3
The definition of ':only-child' in that specification.
Recommendation Definició inicial.
Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 2 1.5 (1.8) 9 9.5 3.1
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic 2.1 1.0 (1.8) 9 10.0 3.1

 

Document Tags and Contributors

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