What is the difference between: > * and without it? - css

Question

lets say i have this html:
<div class="wrapper">
<p>testOne</p>
<p>testTwo</p>
<p>testThree</p>
</div>
If i want to apply to the p tag design, i can go to CSS and use:
1)
.wrapper > * {
color: red;
}
OR
2)
.wrapper {
color: red;
}
Both of them work just fine, so, what is the difference?
I have heard once that the the first example apply the design only to the direct childs of the "wrapper", so then i did:
<div class="wrapper">
<p>testOne</p>
<div class="container">
<p>testTwo</p>
</div>
<p>testThree</p>
</div>
so testTwo is not a direct child..but he still got the color red!

Answer 1

so testTwo is not a direct child..but he still got the color red!
testTwo's parent <div class="container"> has the color red, though, so all of its children inherit that style. It's the same fundamental behavior as setting your body color to red and that reflecting on the whole document.
I have heard once that the the first example apply the design only to the direct childs of the "wrapper"
That's right.
Maybe border will better illustrate the difference between the selectors, since children don't inherit it:
.wrapper > * {
border: 1px solid red;
}
.wrapper {
border: 1px solid blue;
}
<div class="wrapper">
<p>testOne</p>
<div class="container">
<p>testTwoA</p>
<p>testTwoB</p>
</div>
<p>testThree</p>
</div>
Although you didn't ask about it, for context consider also .wrapper *, which selects all children regardless of depth, further illustrating >:
.wrapper * {
border: 1px solid green;
}
.wrapper > * {
border: 1px solid red;
}
.wrapper {
border: 1px solid blue;
}
<div class="wrapper">
<p>testOne</p>
<div class="container">
<p>testTwoA</p>
<p>testTwoB</p>
</div>
<p>testThree</p>
</div>
Note that order matters in the above example since .wrapper * and .wrapper > * are no longer disjoint as .wrapper and .wrapper > * are.