4

¿Qué significa este selector .panel > * { ... } en CSS ?

2 respuestas 2

9

Va a seleccionar todos los hijos directos de los elementos con clase .panel, sean de la etiqueta que sean y tengan la clase/id que tengan.

Nota que dependiendo de las propiedades CSS que se modifiquen pueden que sus descendientes hereden los valores, lo cual podría dar una falsa impresión de que se está seleccionando todo lo que haya dentro del panel, cuando realmente son sólo los descendientes directos porque estás usando el selector con >.

* { 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>

2

Realmente lo que tienes que diferenciar para el estilo .panel > * { ... } es que está compuesto por dos selectores:

  • >, el cual hace referencia a los elementos directos dentro de un contenedor, es decir, a los elementos hijos de un contenedor.

Ejemplo:

.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>

Como puedes observar, el estilo se aplica al span que es hijo directo del contenedor pero no aplica al span que no es hijo directo.

  • *, el cual hace referencia a todos los elementos de la página.

Por lo tanto, la combinación de estos dos selectores > * haciendo referencia a la clase .panel significa que va a hacer referencia a cualquier elemento, sea del tipo que sea, que sea hijo directo del contenedor .panel.

Sin embargo, tienes que tener en cuenta que hay algunas propiedades como el color o el tamaño de letra que, si se aplica a un contenedor hijo, también la heredan a su vez los hijos de este contenedor, es decir, los nietos del contenedor principal (panel en este caso). Sin embargo, tu solo le estás aplicando los estilos a los elementos hijos directos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.