জটিল CSS সিলেক্টর গ্রুপ করার সময় ত্রুটি

গ্রুপ করার সময় কমা দ্বারা পৃথক করা প্রতিটি অংশ必须是一个完整的选择器। দেখা যাক এখানে কোথায় ভুল হতে পারে।

ধরুন আমাদের কাছে এই কোডটি আছে:

#block h2 {
	color: red;
}
#block h3 {
	color: red;
}

আসুন দুটি সিলেক্টরকে একটি সিলেক্টরে গ্রুপ করি। এখানে গ্রুপ করার সঠিক উপায়:

#block h2, #block h3 {
	color: red;
}

এবং এখানে গ্রুপ করার ভুল উপায়:

#block h2, h3 {
	color: red;
}

এই ভুল গ্রুপিং বিকল্পে, 初学者们常误以为 #block 适用于 h2 和逗号后面的 h3。 কিন্তু সিলেক্টরগুলি কমার মাধ্যমে কাজ করে না এবং কার্যত এই ভুল গ্রুপিং বিকল্পটি এভাবে পুনরায় লেখা যেতে পারে:

#block h2 {
	color: red;
}
h3 {
	color: red;
}

আমরা যে প্রারম্ভিক সংস্করণটি সংক্ষিপ্ত করতে শুরু করেছি তার সাথে তুলনা করুন:

#block h2 {
	color: red;
}
#block h3 {
	color: red;
}

সিলেক্টর গ্রুপিং ব্যবহার করে কোডটি সরল করুন:

#block h1 {
	text-align: center;
}
#block h2 {
	text-align: center;
	color: blue;
}
#block h3 {
	text-align: center;
	font-size: 16px;
	color: red;
}

সিলেক্টর গ্রুপিং ব্যবহার করে কোডটি সরল করুন:

#block h1.eee {
	text-align: center;
	font-size: 30px;
}
#block h2.zzz {
	text-align: center;
	font-size: 20px;
}

সিলেক্টর গ্রুপিং ব্যবহার করে কোডটি সরল করুন:

.xxx .kkk {
	text-align: center;
}
.eee h2.zzz {
	text-align: center;
}
#eee h2 {
	text-align: center;
}

সিলেক্টর গ্রুপিং ব্যবহার করে কোডটি সরল করুন:

.eee h2.zzz {
	text-align: center;
}
.xxx {
	text-align: center;
}