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.