Hiba összetett CSS szelektorok csoportosításakor

Minden, ami vesszővel elválasztva van a csoportosításnál, teljes értékű szelektornak kell lennie. Nézzük meg, hol lehet itt hibázni.

Tegyük fel, hogy van egy ilyen kódunk:

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

Csoportosítsunk két szelektort egybe. Itt van a csoportosítás helyes változata:

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

És itt van a csoportosítás helytelen változata:

#block h2, h3 {
	color: red;
}

Ebben a helytelen csoportosítási változatban a kezdőknek valamiért úgy tűnik, hogy a #block mind a h2, mind a h3 elemre vonatkozik, amely a vessző után áll. De a szelektorok nem hatnak vesszőn keresztül, és valójában ezt a helytelen csoportosítási változatot így lehetne átírni:

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

Hasonlítsa össze az eredeti változattal, amelyet kezdtünk rövidíteni:

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

Egyszerűsítse a kódot szelektorok csoportosításával:

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

Egyszerűsítse a kódot szelektorok csoportosításával:

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

Egyszerűsítse a kódot szelektorok csoportosításával:

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

Egyszerűsítse a kódot szelektorok csoportosításával:

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