Virhe monimutkaisten CSS-valitsimien ryhmittelyssä

Kaikki pilkulla erotetut osat ryhmittelyssä tulee olla täydellisiä valitsimia. Katsotaan, missä tässä voi tehdä virheen.

Oletetaan, että meillä on seuraava koodi:

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

Ryhmitetään kaksi valitsinta yhdeksi. Tässä on oikea tapa ryhmittelyyn:

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

Tässä on väärä tapa ryhmittelyyn:

#block h2, h3 {
	color: red;
}

Tässä väärässä ryhmittelytavassa aloittelijoista jostain syystä tuntuu, että #block viittaa sekä h2:een että h3:een, joka seisoo pilkun jälkeen. Mutta valitsimet eivät toimi pilkkujen kautta ja käytännössä tämä väärä ryhmittelytapa voidaan kirjoittaa uudelleen näin:

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

Vertaa alkuperäiseen versioon, jota aloimme lyhentää:

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

Yksinkertaista koodia käyttämällä valitsimien ryhmittelyä:

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

Yksinkertaista koodia käyttämällä valitsimien ryhmittelyä:

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

Yksinkertaista koodia käyttämällä valitsimien ryhmittelyä:

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

Yksinkertaista koodia käyttämällä valitsimien ryhmittelyä:

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