जटिल 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;
}