Selektory podle příbuznosti při vnořování SASS
Pojďme se podívat, jak v SASS při vnořování přidávat různé selektory, které vybírají prvky podle příbuznosti. Sledujte příklady.
Příklad
Dceřiný selektor:
div {
> p {
color: red;
}
}
Výsledek kompilace:
div > p {
color: red;
}
Příklad
Sousední selektor
div {
+ p {
color: red;
}
}
Výsledek kompilace:
div + p {
color: red;
}
Příklad
Příbuzný selektor:
div {
~ p {
color: red;
}
}
Výsledek kompilace:
div ~ p {
color: red;
}
Praktické úlohy
Vysvětlete, jaký bude výsledek kompilace následujícího kódu:
ul {
color: red;
> li {
padding: 20px;
}
}
Vysvětlete, jaký bude výsledek kompilace následujícího kódu:
div {
ul {
> li {
padding: 20px;
}
}
}
