:first-child
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
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
html
<div>
<span>Este span é verde limão!</span>
<span>Este span não é verde limão. :(</span>
</div>
CSS
css
span:first-child {
background-color: lime;
}
... resultado ...
Exemplo 2 - Usando UL
HTML
html
<ul>
<li>Elemento de Lista 1</li>
<li>Elemento de Lista 2</li>
<li>Elemento de Lista 3</li>
</ul>
CSS
css
li {
color: red;
}
li:first-child {
color: green;
}
... resultado ...
Especificações
Specification |
---|
Selectors Level 4 # first-child-pseudo |
Browsers compatíveis
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:first-child | ||||||||||||
Matches elements with no parent |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.