К содержанию

Chyba při použití více CSS selektorů

Připomínám chybu začátečníků: selektor .bbb.zzz a selektor .bbb .zzz dělají různé věci. První hledá element, který má současně dvě třídy, a druhý - hledá element s třídou zzz, který se nachází uvnitř elementu s třídou bbb.

Задание 1

Vysvětlete, co vybírá selektor v uvedeném kódu níže. Poté napište HTML kód, který odpovídá tomuto selektoru. Zde je kód s selektorem:

cssh2.zzz {
  color: red;
}

Задание 2

Vysvětlete, co vybírá selektor v uvedeném kódu níže. Poté napište HTML kód, který odpovídá tomuto selektoru. Zde je kód s selektorem:

cssh2 .zzz {
  color: red;
}

Задание 3

Vysvětlete, co vybírá selektor v uvedeném kódu níže. Poté napište HTML kód, který odpovídá tomuto selektoru. Zde je kód s selektorem:

css.bbb.zzz {
  color: red;
}

Задание 4

Vysvětlete, co vybírá selektor v uvedeném kódu níže. Poté napište HTML kód, který odpovídá tomuto selektoru. Zde je kód s selektorem:

css.bbb .zzz {
  color: red;
}

Задание 5

Vysvětlete, co vybírá selektor v uvedeném kódu níže. Poté napište HTML kód, který odpovídá tomuto selektoru. Zde je kód s selektorem:

css.bbb.zzz.xxx {
  color: red;
}

Задание 6

Vysvětlete, co vybírá selektor v uvedeném kódu níže. Poté napište HTML kód, který odpovídá tomuto selektoru. Zde je kód s selektorem:

css.bbb .zzz.xxx {
  color: red;
}

Задание 7

Vysvětlete, co vybírá selektor v uvedeném kódu níže. Poté napište HTML kód, který odpovídá tomuto selektoru. Zde je kód s selektorem:

css.bbb.zzz .xxx {
  color: red;
}

Задание 8

Vysvětlete, co vybírá selektor v uvedeném kódu níže. Poté napište HTML kód, který odpovídá tomuto selektoru. Zde je kód s selektorem:

css.bbb .zzz .xxx {
  color: red;
}

Задание 9

Vysvětlete, co vybírá selektor v uvedeném kódu níže. Poté napište HTML kód, který odpovídá tomuto selektoru. Zde je kód s selektorem:

css#elem.bbb {
  color: red;
}

Задание 10

Vysvětlete, co vybírá selektor v uvedeném kódu níže. Poté napište HTML kód, který odpovídá tomuto selektoru. Zde je kód s selektorem:

css#elem .bbb {
  color: red;
}