Selektorere efter slægtskab ved indlejring i SASS
Lad os se på, hvordan man i SASS ved indlejring tilføjer forskellige selektorere, der vælger elementer efter slægtskab. Se eksemplerne.
Eksempel
Barneselektor:
div {
> p {
color: red;
}
}
Kompileringsresultat:
div > p {
color: red;
}
Eksempel
Nabo-selektor
div {
+ p {
color: red;
}
}
Kompileringsresultat:
div + p {
color: red;
}
Eksempel
Søskende-selektor:
div {
~ p {
color: red;
}
}
Kompileringsresultat:
div ~ p {
color: red;
}
Praktiske opgaver
Forklar, hvad resultatet af kompileringen af følgende kode vil være:
ul {
color: red;
> li {
padding: 20px;
}
}
Forklar, hvad resultatet af kompileringen af følgende kode vil være:
div {
ul {
> li {
padding: 20px;
}
}
}
