Look at 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 selector div > p
causes all immediate children of div
receive css rules. In the example would be p
with text: First, Second, Third.
These rules do not spread to p
inside section
for these are no longer immediate children of div
, but "grandchildren".
The selector p:first-child
says that all the p
page (regardless of which parents have) who 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 this level, but it is the second child, not the first.
Thank you for the excellent answer, Sergio!
– yagosansz
@Great kidmalo I could help!
– Sergio