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;
		}
	}
}