Մի քանի սելեկտորներ միասին CSS-ում

Տարրը, որը միաժամանակ համապատասխանում է մի քանի սելեկտորների, ընտրելու համար պետք է գրել այդ սելեկտորները միասին, առանց բացատի:

Օրինակ, հետևյալ սելեկտորը կընտրի տարրը, որը միաժամանակ ունի bbb դասը և zzz դասը:

css.bbb.zzz {
  
}

Իսկ հետևյալ սելեկտորը կընտրի h2 վերնագիրը, որը միաժամանակ ունի bbb դասը և zzz դասը:

cssh2.bbb.zzz {
  
}

Նշված եղանակով կարելի է կառուցել սելեկտորների կամայական կոնստրուկցիաներ: Ընդ որում, օգտագործվող սելեկտորների հերթականությունը նշանակություն չունի, բացառությամբ կանոնի, որ տարրերի սելեկտորները պետք է տեղադրվեն ամենասկզբում:

Այսինքն, օրինակ, .bbb.zzz և .zzz.bbb սելեկտորները լիովին համարժեք են:

Բացի այդ, կարելի է ձևավորել սելեկտորներ օգտագործելով id, օրինակ, այսպիսիները: #elem.eee, կամ h2#elem.eee, կամ h2.eee#elem և այլն:

Задание 1

Պատմեք, թե ինչ է ընտրում սելեկտորը ստորև բերված կոդում: Այնուհետև գրեք HTML կոդ, որը համապատասխանում է այս սելեկտորին: Ահա սելեկտորով կոդը:

css.bbb.zzz {
  color: red;
}
Задание 2

Պատմեք, թե ինչ է ընտրում սելեկտորը ստորև բերված կոդում: Այնուհետև գրեք HTML կոդ, որը համապատասխանում է այս սելեկտորին: Ահա սելեկտորով կոդը:

cssh2.bbb.zzz {
  color: red;
}
Задание 3

Պատմեք, թե ինչ է ընտրում սելեկտորը ստորև բերված կոդում: Այնուհետև գրեք HTML կոդ, որը համապատասխանում է այս սելեկտորին: Ահա սելեկտորով կոդը:

css#elem.bbb {
  color: red;
}
Задание 4

Պատմեք, թե ինչ է ընտրում սելեկտորը ստորև բերված կոդում: Այնուհետև գրեք HTML կոդ, որը համապատասխանում է այս սելեկտորին: Ահա սելեկտորով կոդը:

css#elem.bbb.zzz {
  color: red;
}
Задание 5

Պատմեք, թե ինչ է ընտրում սելեկտորը ստորև բերված կոդում: Այնուհետև գրեք HTML կոդ, որը համապատասխանում է այս սելեկտորին: Ահա սելեկտորով կոդը:

cssh2#elem.bbb {
  color: red;
}