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

lets say i have this html:

<div >
  <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:

.wrapper > * {
  color: red; 
}

 .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 >
  <p>testOne</p>
  <div >
     <p>testTwo</p>
  </div>
  <p>testThree</p>
</div>

so testTwo is not a direct child..but he still got the color red!

CodePudding user response：

so testTwo is not a direct child..but he still got the color red!

testTwo's parent <div > 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 >
  <p>testOne</p>
  <div >
     <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 >
  <p>testOne</p>
  <div >
     <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.