Why would I use > * when I could just use * as a selector?

Question

I am reviewing some code, and I am seeing something that doesn't make sense to me.

I am seeing css where the selector is

 .panel  > * {
     /* css code here */
}

My understanding is this gives me all the children of my panel class, and lets me edit their css. However, why wouldn't I just use the following instead?

 .panel  > {
     /* css code here */
}

Isn't the * redundant in the first code example?

This doesnt validate as valid CSS syntax. Did you find the documentation that says it's possible to skip the selector? It may work in some implementation but it doesn't mean it will work everywhere — Adassko, Jul 16 '20 at 15:06
check the duplicates to understand the syntax of such selector and when you can omit the * *If a universal selector represented by * (i.e. without a namespace prefix) is not the only component of a sequence of simple selectors selectors or is immediately followed by a pseudo-element, then the * may be omitted* <-- note the [not the only component] — Temani Afif, Jul 16 '20 at 15:07

Nico Shultz · Accepted Answer · 2020-07-16T15:10:51.943

You could have did this yourself but here is a example that shows it doesn't work

 .panel  > * {
     background-color: blue;
}

 .panel2  > {
     background-color: blue;
}

<div class="panel">
  <div>test</div>
  
  <p>test2</p>
</div>


<div class="panel2">
  <div>test</div>
  
  <p>test2</p>
</div>

and if you meant why not just use * instead of > * witch makes a lot more sense to ask.

see this example

p {
  font-weight: 300;
}

.panel > * {
  font-weight: 600;
}

.panel2 * {
  font-weight: 600;
}

<div class="panel">
  <div>
    <p>P tag inside another div</p>
  </div>
  
  <p>P tag in .panel</p>
</div>


<div class="panel2">
  <div>
    <p>P tag inside another div</p>
  </div>
  
  <p>P tag in .panel</p>
</div>

The > selector selects only the elements that are direct children of the element so in this case only the div and the second p while the * selects all children and all of their children so it selects the div, p inside the div and the p

Why would I use > * when I could just use * as a selector?

1 Answers1