Kesalahan dalam Pengelompokkan Selektor CSS yang Kompleks

Semua yang dipisahkan oleh koma dalam pengelompokkan, harus merupakan selektor yang utuh. Mari kita lihat di mana letak kesalahannya.

Misalkan kita memiliki kode seperti ini:

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

Mari kita kelompokkan dua selektor menjadi satu. Berikut adalah cara pengelompokkan yang benar:

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

Dan berikut adalah cara pengelompokkan yang salah:

#block h2, h3 {
	color: red;
}

Dalam pengelompokkan yang salah ini, para pemula sering kali mengira bahwa #block berlaku untuk kedua h2 dan h3 yang berada setelah koma. Namun, selektor tidak bekerja melalui koma, dan sebenarnya pengelompokkan yang salah ini dapat ditulis ulang seperti ini:

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

Bandingkan dengan versi awal yang ingin kita sederhanakan:

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

Sederhanakan kode berikut dengan menggunakan pengelompokkan selektor:

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

Sederhanakan kode berikut dengan menggunakan pengelompokkan selektor:

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

Sederhanakan kode berikut dengan menggunakan pengelompokkan selektor:

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

Sederhanakan kode berikut dengan menggunakan pengelompokkan selektor:

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