Selektory podľa príbuznosti pri vnorení SASS
Pozrime sa, ako v SASS pri vnorení pridávať rôzne selektory, ktoré vyberajú elementy podľa príbuznosti. Sledujte príklady.
Príklad
DCérsky selektor:
div {
> p {
color: red;
}
}
Výsledok kompilácie:
div > p {
color: red;
}
Príklad
Susedský selektor
div {
+ p {
color: red;
}
}
Výsledok kompilácie:
div + p {
color: red;
}
Príklad
Príbuzný selektor:
div {
~ p {
color: red;
}
}
Výsledok kompilácie:
div ~ p {
color: red;
}
Praktické úlohy
Vysvetlite, aký bude výsledok kompilácie nasledujúceho kódu:
ul {
color: red;
> li {
padding: 20px;
}
}
Vysvetlite, aký bude výsledok kompilácie nasledujúceho kódu:
div {
ul {
> li {
padding: 20px;
}
}
}
