Question:
What does this selector .panel > * { ... } mean in CSS?
Answer:
It will select all the direct children of the elements with class .panel , whatever label they are 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 inside the panel is being selected, when really it is 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>