Estoy tratando de entender el siguiente CSS (quizás no CSS puro):

.A {
    padding: 0
    .B {
        > * {
           boxShadow: '0 1px 1px rgba(0, 0, 0, .1)'
        }
    }
}

La parte que no entiendo es: > * {}

Estoy familiarizado con > como un combinador secundario colocado entre dos selectores, pero aquí no está entre dos selectores, entonces, ¿qué significa esta regla?

Creo que * selecciona todo dentro del componente que > está seleccionando.

0
daisy 9 may. 2019 a las 17:00

4 respuestas

La mejor respuesta

El código que colocó aquí es SCSS (SASS)

Esto generará el siguiente CSS:

.A {
    padding: 0;
}
.A .B > * {
    boxShadow: '0 1px 1px rgba(0, 0, 0, .1)';
}

Y el significado de .B > * {} es que seleccionará cualquier elemento que sea hijo inmediato de la clase .B.

2
Martin 9 may. 2019 a las 14:12

Significa: cada hijo directo a ".B". Seleccionará las etiquetas h1 y p en este ejemplo, pero no el intervalo:

<div class="A">
  <div class="B">
    <h1>Title</h1>
    <p>Paragraph</p>
    <p>
      <span>
      </span>
    </p>
  </div>
</div>
2
Smytt 9 may. 2019 a las 14:04

A veces, los selectores descendientes van un poco por la borda, seleccionando más de lo esperado. En ocasiones, solo se deben seleccionar los elementos secundarios directos de un elemento primario, no todas las instancias del elemento anidadas profundamente dentro de un antepasado. En este caso, se puede usar el selector secundario directo colocando un signo mayor que,>, entre el elemento primario y el elemento secundario dentro del selector.

Por ejemplo, el artículo> p es un selector secundario directo que solo identifica los elementos p que se encuentran directamente dentro de un elemento del artículo. No se seleccionará ningún elemento p colocado fuera de un elemento del artículo, o anidado dentro de otro elemento que no sea el elemento del artículo.

A continuación, el párrafo en la línea 3 es el único hijo directo de su artículo principal, así seleccionado.

CSS:

article > p {...}

HTML:

<p>...</p>
<article>
  <p>This paragraph will be selected</p>
  <div>
    <p>...</p>
  </div>
</article>
0
Antoine Aïello 9 may. 2019 a las 14:13

Esto efectivamente se compilará para:

.A .B > * { ...

Básicamente, cualquier elemento que sea un hijo directo de .A .B

4
Martin 9 may. 2019 a las 14:02