რთული 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;
}