Karmaşık CSS Seçicileri Gruplandırılırken Yapılan Hata

Gruplama sırasında virgülle ayrılan her şey, eksiksiz bir seçiciyi temsil etmelidir. Hatanın nerede yapılabileceğine bir bakalım.

Diyelim ki şöyle bir kodumuz var:

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

Şimdi iki seçiciyi tek bir seçicide gruplayalım. İşte doğru gruplama yöntemi:

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

İşte yanlış gruplama yöntemi:

#block h2, h3 {
	color: red;
}

Bu yanlış gruplama yönteminde, yeni başlayanlar nedense #block seçicisinin hem h2 hem de virgülden sonra gelen h3 için geçerli olduğunu düşünür. Ancak seçiciler virgül yoluyla birbirine bağlanmaz ve aslında bu yanlış gruplama yöntemi şu şekilde yeniden yazılabilir:

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

Kısaltmaya başladığımız orijinal kodla karşılaştırın:

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

Seçici gruplandırmasını kullanarak kodu basitleştirin:

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

Seçici gruplandırmasını kullanarak kodu basitleştirin:

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

Seçici gruplandırmasını kullanarak kodu basitleştirin:

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

Seçici gruplandırmasını kullanarak kodu basitleştirin:

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