Sélecteurs de relation par parenté dans l'imbrication SASS

Voyons comment ajouter différents sélecteurs qui ciblent les éléments par relation de parenté lors de l'imbrication dans SASS. Regardez les exemples.

Exemple

Sélecteur enfant direct :

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

Résultat de la compilation :

styles.cssdiv > p {
  color: red;
}

Exemple

Sélecteur adjacent

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

Résultat de la compilation :

styles.cssdiv + p {
  color: red; 
}

Exemple

Sélecteur de frères et sœurs :

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

Résultat de la compilation :

styles.cssdiv ~ p {
  color: red;
}

Tâches pratiques

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

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