Seletores por parentesco em aninhamento SASS
Vamos examinar como adicionar vários seletores que escolhem elementos por parentesco ao aninhar em SASS. Veja os exemplos.
Exemplo
Seletor filho:
div {
> p {
color: red;
}
}
Resultado da compilação:
div > p {
color: red;
}
Exemplo
Seletor adjacente
div {
+ p {
color: red;
}
}
Resultado da compilação:
div + p {
color: red;
}
Exemplo
Seletor geral de irmãos:
div {
~ p {
color: red;
}
}
Resultado da compilação:
div ~ p {
color: red;
}
Tarefas práticas
Explique qual será o resultado da compilação do seguinte código:
ul {
color: red;
> li {
padding: 20px;
}
}
Explique qual será o resultado da compilação do seguinte código:
div {
ul {
> li {
padding: 20px;
}
}
}
