Difference between Immediate Child and First-Child?

5

Could anyone help me with the difference between these two concepts?

From what I understand both mean the same thing ... but by performing the test below, the text got the formatting of the pseudo-selector

div > p {
    font-family: Garamond;
}

p:first-child {
    font-family: cursive;
}
    
asked by anonymous 25.04.2017 / 04:25

3 answers

4

Notice the example:

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>

The div > p selector causes all immediate children of div to receive css rules. In the example would be p with text: First, Second, Third.

These rules do not propagate to p within section because they are no longer immediate children of div , but rather "grandchildren."

The p:first-child selector says that all p of the page (regardless of which country they are) are the first child of a given element, will have these rules.

Notice that Primeiro and Neto um receive these rules, but not Bisneto dois this despite being the first p of that level, but it is the second child, not the first one.

    
25.04.2017 / 04:58
1

Immediate Child

Select an element that is DIRECT child of another element.

For example

div > span

Select only the first and third span that are direct children.

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

First Child

Selects all elements of the type that are FIRST children of other elements.

For example

p:first-child

You will only select the paragraphs that are the first children of other elements

<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>
    
25.04.2017 / 14:05
1

Simple, Immediate Child selects all matching children

first-child selects the first matching child

Following your example if you only have a p element there will be no difference since it will be the first child and immediate child, but if you have more than one then the first-child will select only the first and Immediate Child all immediate

    
25.04.2017 / 18:46