Селектори по родство при влагане в 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;
		}
	}
}