Селектори по сродство при вгнезденост во SASS

Ајде да разгледаме како во SASS при вгнезденост да се додаваат различни селектори кои избираат елементи по сродство. Погледнете ги примерите.

Пример

Детски селектор:

styles.scssdiv {
  > p {
    color: red;
  }
}

Резултат на компајлирање:

styles.cssdiv > p {
  color: red;
}

Пример

Соседски селектор

styles.scssdiv {
  + p {
    color: red;
  }
}

Резултат на компајлирање:

styles.cssdiv + p {
  color: red; 
}

Пример

Селектор на сестрински елементи:

styles.scssdiv {
  ~ p {
    color: red;
  }
}

Резултат на компајлирање:

styles.cssdiv ~ p {
  color: red;
}

Практични задачи

styles.scssul {
  color: red;
  
  > li {
    padding: 20px;
  }
}

styles.scssdiv {
  ul {
    > li {
      padding: 20px;
    }
  }
}