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 :
div {
> p {
color: red;
}
}
Résultat de la compilation :
div > p {
color: red;
}
Exemple
Sélecteur adjacent
div {
+ p {
color: red;
}
}
Résultat de la compilation :
div + p {
color: red;
}
Exemple
Sélecteur de frères et sœurs :
div {
~ p {
color: red;
}
}
Résultat de la compilation :
div ~ p {
color: red;
}
Tâches pratiques
Expliquez quel sera le résultat de la compilation du code suivant :
ul {
color: red;
> li {
padding: 20px;
}
}
Expliquez quel sera le résultat de la compilation du code suivant :
div {
ul {
> li {
padding: 20px;
}
}
}
