5

Alguém poderia me ajudar com a diferença entre esses dois conceitos?

Pelo que eu entendi ambos significam a mesma coisa...mas realizando o teste abaixo, o texto ficou com a formatação do pseudo-seletor

div > p {
    font-family: Garamond;
}

p:first-child {
    font-family: cursive;
}

3 Respostas 3

4

Repara no exemplo:

div>p {
  font-family: Garamond;
  color: brown;
  text-decoration: underline;
}

p:first-child {
  font-family: cursive;
  color: blue;
}
<div>
  <p>Primeiro</p>
  <p>Segundo</p>
  <p>Terceiro</p>
  <section>
    <p>Neto um</p>
    <p>Neto dois</p>
    <nav>
      <span>Bisneto um</span>
      <p>Bisneto dois</p>
    </nav>
  </section>

</div>

O seletor div > p faz com que todos os filhos imediatos de div recebam regras de css. No exemplo seriam os p com texto: Primeiro, Segundo, Terceiro.

Essas regras não se propagam aos p dentro de section pois esses não são mais filhos imediatos de div, mas sim "netos".


O seletor p:first-child diz que todos os p da página (independentemente de que pais tenham) que sejam o primeiro filho de um dado elemento, terão essas regras.

Repara que Primeiro e Neto um recebem essas regras, mas não Bisneto dois isto apesar de ser o primeiro p desse nível, mas é o segundo filho, não o primeiro.

2
  • 1
    Obrigado pela excelente resposta, Sergio!
    – yagosansz
    Commented 25/04/2017 às 18:16
  • @kidmalo ótimo que pude ajudar!
    – Sergio
    Commented 25/04/2017 às 18:20
1

Immediate Child

Seleciona o um elemento que seja filho DIRETO de outro elemento.

Por exemplo

div > span

Seleciona apenas o primeiro e o terceiro span que são filhos diretos.

    <div>
       <span>Essa é filha direta</span>
       <p>
          <span>Essa NÃO é filha direta.</span>
       </p>
       <span>Essa é filha direta</span>
    </div>

First Child

Seleciona todos os elementos do tipo que são PRIMEIROS filhos de outros elementos.

Por exemplo

p:first-child

Vai selecionar apenas os paragrafos que são primeiros filhos de outros elementos

<div>
   <p>Este sera selecionado</p>
   <p>Este NÃO sera selecionado</p>
</div>

<div>
   <h1>Este não é paragrafo</h1>
   <p>Este NÃO será selecionado</p>
</div>
1
  • Obrigado pela excelente resposta, Fabri!
    – yagosansz
    Commented 25/04/2017 às 18:16
1

Simples, Immediate Child seleciona todos filhos correspondentes

first-child seleciona o primeiro filho correspondente

Seguindo seu exemplo se tiver apenas um elemento p não haverá diferença pois será o primeiro filho e filho imediato, mas caso tenha mais de um ai o first-child selecionara apenas o primeiro e o Immediate Child todos imediatos.

1
  • Obrigado pela excelente resposta, Lennon!
    – yagosansz
    Commented 25/04/2017 às 18:16

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .