Question:
What does this selector .panel > * { ... } in CSS?
Answer:
It is going to select all the direct children of the elements with class .panel , whatever their label and whatever class / id they have.
Note that depending on the CSS properties that are modified, their descendants may inherit the values, which could give a false impression that everything within the panel is being selected, when it is really only the direct descendants because you are using the selector with > .
* { color:blue; } .panel > * { color:red; }
<div>No seleccionado porque no estoy dentro del panel</div> <div class="panel"> No seleccionado porque aunque dentro del panel, no estoy dentro de una etiqueta <div>Seleccionado por ser un descenciente directo</div> <div>Yo también estaré seleccionado <a href="#">pero no este enlace</a></div> <p>Este párrafo estará seleccionado <span>pero no el span de dentro</span></p> </div>