0

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :first-child {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <p>Este é um parágrafo.</p>
    <p>Este é um parágrafo.</p>
    <p>Este é um parágrafo.</p>
</body>
</html>

No exemplo acima o first-child está selecionando e aplicando uma borda no elemento <body> e no elemento <p> porque isso está acontecendo não era para apenas o elemento body receber a borda já que ele é o primeiro elemento filho do documento?

Notem: no stackoverflow não funciona tem que ser em um documento separado.

1 Resposta 1

0

Você precisará identificar a qual elemento o first-child será aplicado. Nesse caso, como você não especificou, ele aplicou ao body.

Tente o seguinte código:

p:first-child {
        border: 1px solid red;
    }

Nesse caso, será aplicado a borda, ao seu primeiro parágrafo.


Caso queira que sua borda seja aplicada ao body, experimente utilizar

body{
  border: 1px solid red;
}
3
  • Mas porque isso ocorre do first-child aplicar a borda no elemento <body> e <p>?
    – user174750
    29/01/2020 às 0:46
  • 2
    @joãobatista eu acabei de testar aqui, e na realidade o acontece com o seu código é que por não estar especificado uma tag, ele irá aplicar a todos os primeiros filhos. developer.mozilla.org/pt-BR/docs/Web/CSS/:first-child 29/01/2020 às 0:53
  • Verdade! era isso mesmo, valeu!
    – user174750
    29/01/2020 às 3:30

Você deve fazer log-in para responder a esta pergunta.