LESS-এ নেস্টেড অবস্থায় আত্মীয়তার উপর ভিত্তি করে সিলেক্টর

আসুন দেখি কিভাবে LESS-এ নেস্টিং করার সময় বিভিন্ন সিলেক্টর যোগ করা যায় যা আত্মীয়তার উপর ভিত্তি করে এলিমেন্ট নির্বাচন করে। উদাহরণ দেখুন।

উদাহরণ

চাইল্ড সিলেক্টর:

div {
	> p {
		color: red;
	}
}

কম্পাইল করার ফল:

div > p {

}

অ্যাডজাসেন্ট সিবলিং সিলেক্টর

div {
	+ p {
		color: red;
	}
}

কম্পাইল করার ফল:

div + p {

}

জেনারেল সিবলিং সিলেক্টর:

div {
	~ p {
		color: red;
	}
}

কম্পাইল করার ফল:

div ~ p {

}

বলুন, নিচের কোড কম্পাইল করার ফল কি হবে:

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

বলুন, নিচের কোড কম্পাইল করার ফল কি হবে:

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