Sumário

A pseudo-classe de CSS :first-child representa qualquer elemento que seja o primeiro filho de seus pais.

Sintaxe

elemento:first-child { estilos }

Exemplos

Exemplo 1

HTML

<div>
  <span>Este span é verde limão!</span>
  <span>Este span não é verde limão. :(</span>
</div>

CSS

span:first-child {
    background-color: lime;
}

... resultado ...

Exemplo 2 - Usando UL

HTML

<ul>
  <li>Elemento de Lista 1</li>
  <li>Elemento de Lista 2</li>
  <li>Elemento de Lista 3</li>
</ul>

CSS

li{
  color:red;
}
li:first-child{
  color:green;
}

... resultado ...

Especificações

Especificação Status Comentário
Selectors Level 4
The definition of ':first-child' in that specification.
Rascunho atual Sem mudança.
Selectors Level 3
The definition of ':first-child' in that specification.
Recomendação Definição inicial.

Browsers compatíveis

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Funcionalidade Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 4.0 3.0 (1.9) 7[1] 9.5 4
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico 1.0 1.0 (1.9.1) 7[1] 10.0 3.1

[1] Internet Explorer 7 não atualiza os estilo dos elementos quando estes são adicionados dinamicamente. No Internet Explorer 8, se um elemento é inserido dinamicamente por um evento de clique, o estilo first-child não é aplicado até que este perca o foco.

Etiquetas do documento e colaboradores

Etiquetas: 
Colaboradores desta página: romulojales
Última atualização por: romulojales,