Selettori di parentela nell'annidamento SASS
Esaminiamo come in SASS, durante l'annidamento, aggiungere diversi selettori che scelgono elementi per parentela. Guarda gli esempi.
Esempio
Selettore figlio diretto (child):
div {
> p {
color: red;
}
}
Risultato della compilazione:
div > p {
color: red;
}
Esempio
Selettore adiacente (adjacent sibling)
div {
+ p {
color: red;
}
}
Risultato della compilazione:
div + p {
color: red;
}
Esempio
Selettore generale di fratelli (general sibling):
div {
~ p {
color: red;
}
}
Risultato della compilazione:
div ~ p {
color: red;
}
Compiti pratici
Spiega quale sarà il risultato della compilazione del seguente codice:
ul {
color: red;
> li {
padding: 20px;
}
}
Spiega quale sarà il risultato della compilazione del seguente codice:
div {
ul {
> li {
padding: 20px;
}
}
}
