Home / Questions / 41621
Accepted
Andrés Muñoz
Asked: 2020-12-30 19:12:40 +0800 CST 2020-12-30 19:12:40 +0800 CST

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

  • 772

What does this selector mean .panel > * { ... }in CSS ?

css

2 Answers

  1. Best Answer

    It will select all the direct children of the elements with class .panel, regardless of the label they are and have the class/id they have.

    Note that depending on the CSS properties being modified, their descendants may inherit the values, which could give a false impression that everything inside the panel is being selected, when really it's just the direct descendants because you're 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>

    • 9

  2. What you really have to differentiate for the style .panel > * { ... }is that it is made up of two selectors:

    • >, which refers to the direct elements inside a container, that is, the child elements of a container.

    Example:

    .panel > span{
  background-color: red;
}
    <div class="panel">
   <span>Este es un span hijo y por eso aplica</span>
   <label>Este es un hijo directo pero no aplica porque es una label</label>
   <div>
     <span>Este es un span nieto</span>
   </div>
</div>

    As you can see, the style is applied to the spanone that is a direct child of the container but it does not apply to the spanone that is not a direct child.

    • *, which refers to all the elements of the page.

    Therefore, the combination of these two selectors > *referencing the class .panelmeans that it will refer to any element, whatever its type, that is a direct child of the container .panel.

    However, you have to keep in mind that there are some properties such as color or font size that, if applied to a child container, are also inherited by the children of this container, that is, the grandchildren of the main container. ( panelin this case). However, you are only applying the styles to the direct child elements.

    • 2