SASS beágyazásban használatos rokonsági szelektorok
Nézzük meg, hogyan adhatunk hozzá különböző szelektorokat a SASS beágyazásban, amelyek a rokonság alapján választják ki az elemeket. Lásd a példákat.
Példa
Gyermek szelektor:
div {
> p {
color: red;
}
}
Fordítás eredménye:
div > p {
color: red;
}
Példa
Szomszédos szelektor
div {
+ p {
color: red;
}
}
Fordítás eredménye:
div + p {
color: red;
}
Példa
Testvér szelektor:
div {
~ p {
color: red;
}
}
Fordítás eredménye:
div ~ p {
color: red;
}
Gyakorlati feladatok
Mesélje el, mi lesz a fordítás eredménye a következő kódnak:
ul {
color: red;
> li {
padding: 20px;
}
}
Mesélje el, mi lesz a fordítás eredménye a következő kódnak:
div {
ul {
> li {
padding: 20px;
}
}
}
