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

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

Пример

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

div {
	> p {
		color: red;
	}
}

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

div > p {
	color: red;
}

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

div {
	+ p {
		color: red;
	}
}

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

div + p {
	color: red; 
}

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

div {
	~ p {
		color: red;
	}
}

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

div ~ p {
	color: red;
}

Објаснете каков ќе биде резултатот на компајлирање на следниот код:

ul {
	color: red;
	
	> li {
		padding: 20px;
	}
}

Објаснете каков ќе биде резултатот на компајлирање на следниот код:

div {
	ul {
		> li {
			padding: 20px;
		}
	}
}