Σφάλμα στην ομαδοποίηση σύνθετων επιλογέων 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;
}