Selektorów pokrewieństwa przy zagnieżdżaniu SASS
Przyjrzyjmy się, jak w SASS przy zagnieżdżaniu dodawać różne selektory, które wybierają elementy według pokrewieństwa. Spójrz na przykłady.
Przykład
Selektor dziecka:
div {
> p {
color: red;
}
}
Wynik kompilacji:
div > p {
color: red;
}
Przykład
Sąsiedni selektor
div {
+ p {
color: red;
}
}
Wynik kompilacji:
div + p {
color: red;
}
Przykład
Selektor rodzeństwa:
div {
~ p {
color: red;
}
}
Wynik kompilacji:
div ~ p {
color: red;
}
Zadania praktyczne
Opowiedz, jaki będzie wynik kompilacji następującego kodu:
ul {
color: red;
> li {
padding: 20px;
}
}
Opowiedz, jaki będzie wynik kompilacji następującego kodu:
div {
ul {
> li {
padding: 20px;
}
}
}
