Which element am I going to select when I write .panel > * { … } in CSS?

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>
Scroll to Top