Selectores de relación en anidamiento SASS
Veamos cómo en SASS, al anidar, añadir diferentes selectores que eligen elementos por relación. Mira los ejemplos.
Ejemplo
Selector hijo:
div {
> p {
color: red;
}
}
Resultado de la compilación:
div > p {
color: red;
}
Ejemplo
Selector adyacente:
div {
+ p {
color: red;
}
}
Resultado de la compilación:
div + p {
color: red;
}
Ejemplo
Selector hermano general:
div {
~ p {
color: red;
}
}
Resultado de la compilación:
div ~ p {
color: red;
}
Tareas prácticas
Explica cuál será el resultado de la compilación del siguiente código:
ul {
color: red;
> li {
padding: 20px;
}
}
Explica cuál será el resultado de la compilación del siguiente código:
div {
ul {
> li {
padding: 20px;
}
}
}
