Kynar CSS selektorlarynyň toparynda ýalňyşlyk

Toparlama wagty orta çyzyklar bilen bölünen zatlar, doly düzülen selektor bolmaly. Geliň, bu ýerde nähili ýalňyşlyk edip bolýandygyna ser salalyň.

Geliň, bizde şeýle kod bolsun:

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

Geliň, iki selektory bir toparda jemleýliň. Selektorlary toparlamagyň dogry warianty şu:

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

Selektorlary toparlamagyň nädogry warianty bolsa şu:

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

Bu nädogry toparlama wariantynda, näme üçin bolsa hem täze başlanýanlara, #block -iň hem h2 hem-de orta çyzykdan soň gelen h3 degişli bolýandyk ýaly görünýär. Emma selektorlar orta çyzyklar arkaly işlemeýär we esasan, bu nädogry toparlama wariantyny şeýle ýazyp bolýar:

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

Başlangyç wariant bilen deňeşdiriň, biz ony gysgaltmaga başladyk:

css#block h2 {
  color: red;
}
#block h3 {
  color: red;
}
Задание 1

Selektorlary topary ulanmak arkaly kody ýönekeýleşdiriň:

css#block h1 {
  text-align: center;
}
#block h2 {
  text-align: center;
  color: blue;
}
#block h3 {
  text-align: center;
  font-size: 16px;
  color: red;
}
Задание 2

Selektorlary topary ulanmak arkaly kody ýönekeýleşdiriň:

css#block h1.eee {
  text-align: center;
  font-size: 30px;
}
#block h2.zzz {
  text-align: center;
  font-size: 20px;
}
Задание 3

Selektorlary topary ulanmak arkaly kody ýönekeýleşdiriň:

css.xxx .kkk {
  text-align: center;
}
.eee h2.zzz {
  text-align: center;
}
#eee h2 {
  text-align: center;
}
Задание 4

Selektorlary topary ulanmak arkaly kody ýönekeýleşdiriň:

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