複雑なCSSセレクターのグループ化におけるよくある間違い

グループ化の際にカンマで区切られたものはすべて、完全なセレクターでなければなりません。どこで間違いが起こりやすいかを見てみましょう。

次のようなコードがあるとします：

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

二つのセレクターを一つのグループにまとめてみましょう。正しいグループ化の例はこちらです：

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

そして、こちらが間違ったグループ化の例です：

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

この誤ったグループ化では、なぜか初心者は #blockが、カンマの後に続くh3にも適用されると考えがちです。しかし、セレクターはカンマを越えては作用しません。実際、この誤ったグループ化は次のように書き換えることができます：

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

これを、グループ化を始める前の元のコードと比べてみてください：

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

Задание 1

セレクターのグループ化を用いてコードを簡略化してください：

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

Задание 2

セレクターのグループ化を用いてコードを簡略化してください：

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

Задание 3

セレクターのグループ化を用いてコードを簡略化してください：

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

Задание 4

セレクターのグループ化を用いてコードを簡略化してください：

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