:first-child

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

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

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.