English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:first-pseudo-elemento filho CSS-class indica o primeiro elemento de um grupo de irmãos.
Manual completo de seletores CSS
Corresponde ao primeiro <p> do pai do <p>.
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Manual básico(oldtoolbag.com)</title>
<style>
p:first-child
{
fundo-cor:laranja;
}
</style>
</head>
<body>
<p>Primeiro parágrafo do conteúdo principal./p>
<h1>Bem-vindo à minha página pessoal</h1>
<p>Este parágrafo não é o primeiro filho de seu pai./p>
<div>
<p>Este é o primeiro parágrafo contido dentro do Div.</p>
<p>Este não é o primeiro parágrafo.</p>
</div>
<p><b>Atenção:</b> :first-Ação do child no IE8e versões de navegadores mais antigas, o DOCTYPE deve já ter sido declarado.</p>
</body>
</html>Teste e veja ‹/›:first-O seletor child combina o primeiro filho do elemento pai.
Os números na tabela indicam a primeira versão do navegador que suporta essa propriedade.
| Seletor | |||||
|---|---|---|---|---|---|
| :first-child | 4.0 | 7.0 | 3.0 | 3.1 | 9.6 |
Atenção: :first-child no IE8e versões mais antigas do IE devem declarar!DOCTYPE
Tutorial CSS: Pseudo-classes CSS
Escolher cada <i> elemento dentro de cada <p> e definir seu estilo, onde o <p> é o primeiro filho do elemento pai:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Manual básico(oldtoolbag.com)</title>
<style>
p:first-child i
{
background:yellow;
}
</style>
</head>
<body>
<p>Eu sou um <i>strong</i> homem. Eu sou um <i>strong</i> homem.</p>
<p>Eu sou um <i>strong</i> homem. Eu sou um <i>strong</i> homem.</p>
<p><b>Atenção:</b> :first-Ação do child no IE8e versões de navegadores mais antigas, o DOCTYPE deve já ter sido declarado.</p>
</body>
</html>Teste e veja ‹/›Estilo escolhido para o primeiro <li> elemento da lista:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Manual básico(oldtoolbag.com)</title>
<style>
li:first-child
{
background:yellow;
}
</style>
</head>
<body>
<ul>
<li>Café</li>
<li>Chá</li>
<li>Coca Cola</li>
</ul>
<ol>
<li>Café</li>
<li>Chá</li>
<li>Coca Cola</li>
</ol>
<p><b>Atenção:</b> :first-Ação do child no IE8e versões de navegadores mais antigas, o DOCTYPE deve já ter sido declarado.</p>
</body>
</html>Teste e veja ‹/›Estilo escolhido para o primeiro filho de cada <ul> element::
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Manual básico(oldtoolbag.com)</title>
<style>
ul>:first-child
{
background:yellow;
}
</style>
</head>
<body>
<ul>
<li>Café</li>
<li>Chá</li>
<li>Coca Cola</li>
</ul>
<ul>
<li>Café</li>
<li>Chá</li>
<li>Coca Cola</li>
</ul>
<p><b>Atenção:</b> :first-Ação do child no IE8e versões de navegadores mais antigas, o DOCTYPE deve já ter sido declarado.</p>
</body>
</html>Teste e veja ‹/›