--- title: ':first-child' slug: 'Web/CSS/:first-child' tags: - CSS - Layout - Pseudo-class - Reference - Web translation_of: 'Web/CSS/:first-child' ---
{{CSSRef}}

La pseudo-class CSS :first-child representa el primer element entre un grup d'elements germans.

/* Selecciona qualsevol <p> que sigui el primer element entre els seus germans */
p:first-child {
  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

{{csssyntax}}

Exemples

Exemple bàsic

HTML

<div>
  <p>This text is selected!</p>
  <p>This text isn't selected.</p>
</div>

<div>
  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text isn't selected.</p>
</div>

CSS

p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

Resultat

{{EmbedLiveSample('Basic_example', 500, 200)}}

Disseny d'una llista

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>

CSS

ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}

Resultat

{{EmbedLiveSample('Styling_a_list')}}

Especificacions

Especificació Estat Comentari
{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}} {{Spec2('CSS4 Selectors')}} No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}} {{Spec2('CSS3 Selectors')}} Cap canvi.
{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}} {{Spec2('CSS2.1')}} Definició inicial.

{{CompatibilityTable}}

Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 4.0 {{CompatVersionUnknown}} {{CompatGeckoDesktop("1.9")}} 7[1] {{CompatOpera(9.5)}} 4
No es requereix cap pare {{CompatChrome(57)}} {{CompatUnknown}} {{CompatGeckoDesktop("51")}}[2] {{CompatUnknown}} {{CompatOpera(44)}} {{CompatUnknown}}
Descripció Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatGeckoMobile("1.9.1")}} 7[1] {{CompatOperaMobile(10)}} 3.1
No es requereix cap pare {{CompatChrome(57)}} {{CompatChrome(57)}} {{CompatGeckoMobile("51")}}[2] {{CompatUnknown}} {{CompatUnknown}} {{CompatOperaMobile(44)}} {{CompatUnknown}}

[1] Internet Explorer 7 no actualitza els estils quan s'afegeixen elements dinàmicament. A Internet Explorer 8, si un element s'insereix de forma dinàmica fent clic en un enllaç, l'estil del primer fill no s'aplica fins que l'enllaç no ha perdut el focus.

[2] Veure {{bug(1300374)}}.

Vegeu també